sigmanode’s blog

まちがってたら、おしえてください

文章の中の漢字だけ任意のタグで囲む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>');

CSS

span.biggerKanji {
    font-size: 26px;
}

HTML

<p id="hoge">こんにちは、今日はいいお天気ですね。</p>
<p class="bar">明日は雪が降るそうです。<br>どうぞお体にお気を付けください。</p>
<p class="bar">寒いのは嫌です。buruburu</p>

こんな感じで CSS を指定しておけば、文章の中の漢字だけが大きくなったりする。