かなり昔から色々な人が作ってるリファラを調べて検索語を取得しドキュメントの単語を強調表示するスクリプトを今さら書いた。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 検索」などからこのサイトを開くとハイライトされる。