Bushimichi's blog: JQueryで連続した半角英数字を任意の場所で改行するプラグイン

2014年6月25日水曜日

JQueryで連続した半角英数字を任意の場所で改行するプラグイン

長い半角英数字が改行されず思いのほかレイアウトが崩れることってありますよね。

特に掲示板みたいなユーザに入力してもらうようなシステムの場合

開発時に想定してなかった長い半角英数字なんかをいれられて、

後から「おおおなんじゃこりゃぁああああ」なんてことがたまにあります。

ただ、最近までレイアウトが多少崩れても「まぁいっか」くらいの気持ちでして（←だめだね）

どうしても解決しなければいけないときは、textarea を強引に流用したり誤魔化してきたような。。。。とはいえ、そんなずぼらなことではいけない気もするのでjQueryのプラグインを作ってみました。

IE系のCSSには、独自に拡張した word-break: break-all; を使えばすぐに解決できるのですがそれ以外のブラウザがまだ対応してないみたいでここがちょっとネックですね。

CSS3くらいには標準になるのかな？

いろいろ、調べてみると任意改行文字 8203を使うのがなんとなく意図した内容に近いみたいです。

各テキストの1文字ずつにこれを挟んでようやく解決。（しかし、テキストの量が多くなると処理に時間がかかりすぎるかも）

（追記）2009/12/09 version 0.2 以下の参照ページでご指摘いただいた修正をしました。

【jQuery】word-break:break-all;をie以外でも実装するjQueryプラグイン

げことじさんありがとうございました。

jquery.wb.js - 0.2


jQuery(function($){

$.wb = {

version: 0.2

,sep: String.fromCharCode(8203)

,remake: function(elm){
var h = elm.contents();
elm.html('');
$(h).each(function(){
if(this.nodeType == 3){
elm.append($.trim(this.textContent.split('').join($.wb.sep)));
}else if(this.textContent == ''){
elm.append(this);
}else{
elm.append($.wb.remake($(this)));
}
});
return elm;
}
}

$.fn.wb = function(){
if(/msie/i.test(navigator.userAgent)){
$(this).css('word-break', 'break-all');
}else{
$.wb.sep =  (/firefox\/2/i.test(navigator.userAgent)) ? '<wbr />' : String.fromCharCode(8203);
$(this).each(function(){ $.wb.remake($(this));});
}

return $(this);
}
});