文章の中の漢字だけ任意のタグで囲むJavaScript
何の必要があって?と思わないでもないけど、やってみたかっただけである。後悔はしてない。
function markUpKanji( selector, before, after ){ return function(){ var obj = document.querySelectorAll(selector); for(var i = 0; i < obj.length; i++ ){ var str = obj[i].innerHTML, length = str.length, markedUp = '', flag = false; for( var j = 0; j < length; j++ ){ // 正規表現 http://tama-san.com/?p=196 if( str[j].match(/^(?:[々〇〻\u3400-\u9FFF\uF900-\uFAFF]|[\uD840-\uD87F][\uDC00-\uDFFF ])+$/) ){ if( flag == false ){ markedUp += before + str[j]; flag = true; } else { markedUp += str[j]; } } else { if( flag == false ){ markedUp += str[j]; } else { markedUp += after + str[j]; flag = false; } } } obj[i].innerHTML = markedUp; } } } window.onload = markUpKanji( '#hoge, .bar', '<span class="biggerKanji">', '</span>');
span.biggerKanji { font-size: 26px; }
HTML
<p id="hoge">こんにちは、今日はいいお天気ですね。</p> <p class="bar">明日は雪が降るそうです。<br>どうぞお体にお気を付けください。</p> <p class="bar">寒いのは嫌です。buruburu</p>
こんな感じで CSS を指定しておけば、文章の中の漢字だけが大きくなったりする。