前回のエントリで取り上げたスクリプトをjQueryプラグイン化した。だけ。GitHubにリポジトリを作って公開しておいた。基本的にはこれでもう良いやとか思ってるんだけど、URLパターンはもうちょっと何とかならないかなとかは思ってる。あとマルチカラーなハイライトを実現できるようにはしたいかも。実装はhighlight-1とかクラス名を順に振っていくだけとか簡単そうなものになると思う(そこまで考えてるなら実装しろ)。
使い方は多くのjQueryプラグインと同じで、
$("body").highlightSearchTerms();と検索語のハイライトを行いたい要素からつなげて使う。プラグイン側でインライン・スタイルを付加したりはしないので、デフォルトのem.highlightに対してスタイル指定をあらかじめしておく必要がある。
highlightSearchTerms()にはオプションとして、
$("body").highlightSearchTerms({
className: "search-keyword",
referrerPatterns: [
"^http://ask\.jp.+[?&]q=([^&]+).*$"
],
unsafeChars: "[!-*,-/:-@[-`{-~]"
});このように指定することができる。
classNameは強調する時に使用するem要素に指定されるclass属性。デフォルトはhighlight。
referrerPattersはリファラを評価する正規表現のパターン。配列なので複数指定可能。デフォルトでGoogle(comとco.jp)・Yahoo!(comとco.jp)・Bingの計5つが設定されており、オプションで指定されたものとマージされる。オプションで指定したものが先に評価され、マッチした時点で評価のループを抜けるので、デフォルトのパターンよりも優先されることになる(上書きではないが、近い挙動になる)。例えば自分のサイト内検索のリファラを拾うようにするためには、
$("body").highlightSearchTerms({
referrerPatterns: [
"^http://hail2u\.net.+[?&]q=([^&]+).*$"
]
});とかしてやれば良い(これはこのサイトの場合の例)。
unsafeCharsは検索語から削除する文字列の正規表現パターン。デフォルトではほとんど全ての半角記号を削除するようになっている。なので、記号が強調されることはない。あまり指定する必要はないと思うが一応。むしろデフォルトの削除パターンをもっと充実させたい。このオプション指定は追加ではなく上書きなので注意が必要。
また、デバッグ用にreferrerというオプションがある。
$("body").highlightSearchTerms({
referrer: "http://www.google.com/search?q=lorem+ipsum+dolor+sit+amet"
});とすることによってdocument.referrerの代わりにreferrerで指定されたURL(URLじゃなくても通っちゃうけど)が検索語の取り出し元になる。なので、色々なリファラを想定して試すことができる。
ビルトインのリファラ・パターンはパブリックにしてあるので上書きしてしまうことも可能。だが、オプションで優先して評価させることができるのでそっちを使った方が無難だと思う。コードも汚くなっちゃうし。
内容のコードはあまり変わっていない。変えたところは$("*").not("iframe")というような感じで書いていた部分をfind()と:not()セレクタを使うようにしたことくらい。
this.find(":not(iframe)").contents().each();という感じになっている。jQueryのここらへんの柔軟性はすごくて、XPathなんか目じゃないね(おおげさ)。
検索サイトのURLパターンとか調べて書くのがちょっと面倒だったので、こういうのはオープンなデータベースがあったら便利かもしれないなと思った。パラメータごとにきちんと分けてデータベース化すれば、こういうリファラから検索語を強調するスクリプト(ユーザー・スクリプトも含め)とかに使う以外にも、アクセスログ解析とかは勿論、逆に検索を投げるためにも使えそう。「言うだけならタダだよね」。ですよねー。てか知らないだけで既にありそうな気もする(検索してない)。