Edited at

全角・半角問わず、連続した英数を改行禁止にする「AutoHyphenation.js」を書いた

More than 3 years have passed since last update.

「IEでは全角英数の禁則処理が行われてるのに、なんでChromeではでけへんの?」と言われたので、英数を強制的に改行禁止とするjQuery Plugin書いた。

CSSでword-breakを用いても2bytesの英数は単語中で改行されてしまうため、半ば強引な手段で改行禁止処理を導入してみた。


index.html

<!doctype html>

<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>安田さんリバース</title>
</head>
<body>

<div>
<p>安田顕はびっくり人間である。<br>
安田顕は200mlの牛乳を3secで飲むことが出来る男である。
</p>
<p>だが、安田顕も神ではない。<br>
彼は岩手・小岩井農場での牛乳早飲み対決において、6本の牛乳に挑んだが、無惨にも大量リバースという結末を迎えたのだった。
</p>
<p>ありがとう安田顕。さようなら安田顕。Good bye 安田顕。</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="autohyphenation.js"></script>
<script>
$( function(){
$("p").autoHyphenation();
});
</script>
</body>
</html>



autohyphenation.js

// --------------------------------------------------

// 連続した全角・半角英数を改行禁止にする
// 使い方
// $(selector).autoHyphenation(param);
// param:
// "className": 文字列 付与するクラス名(初期値: auto-hyphenation)
// "inlineStyle": bool値 インラインスタイルで改行禁止を記述(初期値:true)
// "tagName": 文字列 スタイル記述用のタグ指定(初期値: i)
// --------------------------------------------------

( function ( $ ) {
$.fn.autoHyphenation = function ( options ) {
// オプション初期化
var settings = $.extend( {}, {
"className": "auto-hyphenation",
"enableInlineStyle": true,
"tagName": "i"
}, options );
// -----------------------------

// プラグイン本文記述

// 対象要素オブジェクトを取得
var elemArray = $(this);

elemArray.each(function(){
// 文字列の取得
var currentString = $(this).text();

// 置き換えHTML用文字列の生成
var replaceString = currentString.replace(/[0-90-9A-Za-za-zA-Z]+/g,function( matchStr ){
if (settings.enableInlineStyle){
// インラインスタイル使用
return "<" + settings.tagName + " class=\"" + settings.className + "\" style=\"white-space:nowrap\">" + matchStr + "</"+ settings.tagName + ">";
} else {
// インラインスタイル禁止
return "<" + settings.tagName + " class=\"" + settings.className + "\">" + matchStr + "</" + settings.tagName + ">";
}
});

// 文字列の置き換え
$(this).html(replaceString);
});
}
} ( jQuery ) );


DOM上では以下のようになる。


変更前

<div>

<p>安田顕はびっくり人間である。<br>
安田顕は200mlの牛乳を3secで飲むことが出来る男である。
</p>
<p>だが、安田顕も神ではない。<br>
彼は岩手・小岩井農場での牛乳早飲み対決において、6本の牛乳に挑んだが、無惨にも大量リバースという結末を迎えたのだった。
</p>
<p>ありがとう安田顕。さようなら安田顕。Good bye 安田顕。</p>
</div>


変更後

<div>

<p>安田顕はびっくり人間である。<br>
安田顕は<i class="auto-hyphenation" style="white-space:nowrap">200ml</i>の牛乳を<i class="auto-hyphenation" style="white-space:nowrap">3sec</i>で飲むことが出来る男である。
</p>
<p>だが、安田顕も神ではない。<br>
彼は岩手・小岩井農場での牛乳早飲み対決において、<i class="auto-hyphenation" style="white-space:nowrap">6</i>本の牛乳に挑んだが、無惨にも大量リバースという結末を迎えたのだった。
</p>
<p>ありがとう安田顕。さようなら安田顕。<i class="auto-hyphenation" style="white-space:nowrap">Good</i> <i class="auto-hyphenation" style="white-space:nowrap">bye</i> 安田顕。</p>
</div>