検索語の強調

かなり昔から色々な人が作ってるリファラを調べて検索語を取得しドキュメントの単語を強調表示するスクリプトを今さら書いた。jQueryのおかげでそこそこ短く書けた。遅いけど。リファラから検索語を取得する部分はまぁ置いておいて(あんまり考えずに書いたので)、ドキュメントの単語をハイライトするコードの部分についてだけ書いておく。

$("#contents > .section *").not("iframe").contents().each(function () {
  if (this.nodeType === 3) {
    var s = this.nodeValue.replace(words, "<em class=\"highlight\">$1</em>");
    $(this).replaceWith(s);
  }
});

だけ。wordsにはリファラから取得した単語の正規表現が入っている。このサイトではメインのコンテンツは必ず#contents > .section以下にあるので最初のセレクタはこうなってるが、$("body *")とかでもOK。そこからテキスト・ノードも含めて拾えるcontents()、each()と繋げて全ノードを走査する。で、テキスト・ノードだったらnodeValueから内容(テキスト・データ)を拾い、replaceWith()でノードの内容を置き換えている。

テキスト・ノードを全部拾うまではすぐに書けたけど、replaceWith()を知らなくて色々変なことやってた。親ノードに戻ってノード作り直して入れ替えとか。

jQueryのcontents()はiframe要素だけ特別扱いしているので、iframe要素だけ除外しておいてやらないと、Internet ExplorerやOperaでjQueryがエラ－を吐く。Firefoxではエラーが出なかったのでちょっとはまったが、Operaの開発者ツールで原因を調査できたので助かった。

ここには既に導入してあるので、「圧縮フォルダ エクスプローラ キビキビ zipfldr - Google 検索」などからこのサイトを開くとハイライトされる。