「CSS 特定文字に色つけ」

教えてgoo JavaScript

文書内の特定の文字の色を変えるスクリプトを考える

http://oshiete.goo.ne.jp/qa/7039678.html

自分なりの解答

<!DOCTYPE html>
<title></title>
  <style>
  em.language {background:#4f0;}
  </style>

<body>
  <ol id="hoge">
    <li>Javascript は、ブラウザ内で動く言語だ。
    <li>きっとこれから数年、もてはやされる言語かもしれない
  </ol>

<script>

// テキストノードだけを集める
function getTextNode (node) {
  return (3 === node.nodeType)
         ? [node]
         : (node.hasChildNodes ())
           ? Array.prototype.concat.apply ([],
                Array.prototype.map.call (node.childNodes, arguments.callee))
           : [];
}


/*
 * nodo に、this.text と同じ文字列が含まれていれば、this.referenceTag を複写して
 * ノードを挿入する
 */
function wardWrap (node) {
  var t, i;
  var len = this.text.length;

  while (-1 < (i = node.data.lastIndexOf (this.text))) {
    node.parentNode.insertBefore (this.referenceTag.cloneNode (true), node.splitText (i + len));
    node.data = node.data.substring (0, i);
  }
}


/*
 * 指定要素以下のテキストを集め、対象となる文字を指定ノードで置き換える
 */
function textMaker (target, referenceTag, matchStr) {
  getTextNode (target).forEach (wardWrap,
      {'referenceTag': referenceTag, 'text': matchStr || referenceTag.textContent});
}


var str = '言語';
var em = document.createElement ('em');

em.appendChild (document.createTextNode (str));
em.className = 'language';

textMaker (document.getElementById ('hoge'), em);

</script>