jQuery 指定した文字列をハイライトするプラグイン

やりたいこと：: 検索結果から、検索した文字列をハイライトしたい

jQueryでプラグインとかないか探してみたら、ありました。

highlight: JavaScript text higlighting jQuery plugin
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

MITライセンスとなっています。あまりメジャーではないのか情報が少なめだったので、本家サイトを参考に導入手順を残しておいてみます。

使い方

1. jQuery本体とプラグインの読み込み

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.highlight-3.js"></script>

2. スタイルシートにハイライト用のクラスを記述

クラス名は「highlight」固定、背景色などは自由に記述

.highlight { background-color: yellow }

3. ハイライトを適用する

検索対象となる要素集合(任意)のjQuery オブジェクトに対して、ハイライトしたい語句を引数にしてhighlight()メソッドを呼ぶ

$(".target").highlight("さがす語句");

4. ハイライトを取り除く

取り除きたい要素集合(任意)のjQuery オブジェクトに対して、removeHighlight()メソッドを呼ぶ

$(".target").removeHighlight();

留意点

空文字(「""」)を渡すと、ブラウザが固まってしまいます。実際にやらかしまして、見たこともないChromeのダイアログが現れたりしました。ので、記念にキャプチャ。

空文字の場合は処理しないようにすべきでしょう。

コードサンプル

以下、画面遷移した直後にハイライトを適用するコード例です。検索フォームと結果が同一画面で、#keywordとid指定したテキストボックスに入力内容を保持しているとします。

<script type="text/javascript">
$(function(){
    var keyword = $("#keyword").val();
    if (keyword != "") {
        $(".target").highlight(keyword);
    }
});
</script>

【追記】

新たに記事とサンプルを作成しました。

記事：jQuery 指定した文字列をハイライトするプラグイン改良サンプル - 130単位
サンプル：http://deeeki.sitemix.jp/sample/jquery_highlight/

Permalink | コメント(9) | トラックバック(3)

コメントを書く

ナカムラ 2009/12/21 19:43 便利な方法をご紹介下さいましてありがとうございます。
実施してみましたが、
・複数のワードを半角空白で区切って指定すると、ハイライトされません。ワードが一つなら動作します。複数の場合、どのようにワードを入力すべきでしょうか？
・アルファベットの場合、全角半角種別を識別するため、種別が合わないとハイライトされないようです。何か補足できないものでしょうか？
以上、アドバイス頂ければ幸いです。

deeeki 2009/12/24 02:36 コメントありがとうございます。
適切に答えられるか自信がないですが、ちょっと試行錯誤してみて記事にしたいと思います。

ナカムラ 2010/01/03 11:44 レスありがとうございます。もう一度、プラグインサイト(このページの冒頭で紹介されているもの)をよく調べましたところ、
コメントとして、
#16 2009-08-23 by alexanderia_lover
の記事に出てい手、コレでできました。
なお、カスタマイズとして、
http://d.hatena.ne.jp/Rewish/20090703/1246615343
に紹介されている方法を加え、前後に空白スペースが入ってしまった場合なども除去できるようにして実施して見ました。
ありがとうございました。

paruparu 2010/01/13 22:40 はじめまして。今現在これとよく似たものを使っているのですが、一つだけ問題（私の使っているスクリプト実行時に jQuery Lightbox が機能しない）がありまして、解決策を探していたところ、こちらの記事をみつけました。

URL で行っていることと、同じことが出来ればと思っているのですが、設置方法を理解しきれず、上手く機能しません。

この場合のように、例えば「Google」という文字列をハイライトさせたい場合

$(function(){
var keyword = $("#keyword").val();
if (keyword != "") {
$(".target").highlight(keyword);
}
});
部分はどのように書き変えればよいのでしょうか？

また、適応範囲を指定することも可能なのでしょうか？初歩的な質問で申し訳ありませんが回答頂ければ幸いです。

paruparu 2010/01/14 10:42 $(function(){
$(".#highlight-plugin").highlight("<%tag_word><%search_word>");
});

や

<input type="button" onclick="$('#highlight-plugin').removeHighlight().highlight('<%tag_word><%search_word>');" />

という使い方まではできました。（※<%tag_word><%search_word> はFC2ブログ用の変数です）
これに、もしキーワードが何もなければ・・・という機能を付ければということなのだと思いますが、その方法がまだ解りません。。。

deeeki 2010/01/14 13:37 ＞ナカムラさん

答えられず申し訳ありませんでした。
そしてわざわざコメントありがとうございました。
同じ要望持った方のために、そのうち別記事でまとめてみたいと思います。

deeeki 2010/01/14 13:47 ＞paruparuさん

リンク先はご自身のサイトでしょうか。
タグ指定の場合も検索ボックスにキーワードが入るようですので、以下のコードでいけるかと思います。

$(function(){
var keyword = $("#sidebar input[name='q']").val();
if (keyword != "") {
$("#content").highlight(keyword);
}
});

「var keyword ...」の1行は、keywordという変数に検索ボックスの内容を代入しています。
「if (keyword ...」から3行は、キーワード(検索ボックスの内容)が存在した場合に処理をしています。

paruparu 2010/01/14 14:01 deeekiさん、回答ありがとうございます。
実は、こちらの記事を参考にその後も試行錯誤してみた結果、何とか思い通りの結果が得られるようになりました。
タグ検索の方は、ボタンクリックのままにするか、もうちょっと目立たない色でハイライトさせるか検討してみようと思います。

また、特に何もしていませんが、アルファベットの大文字小文字に左右されずハイライトすることも可能になり、これまで以上に使いやすくなりました。

本当にありがとうございました！
複数のワードを入れた場合への対応。。。将来的には私もチャレンジしてみたいです。

deeeki 2010/01/14 14:36 記事が参考になったのなら、こちらとしてもうれしく思います！

ちょっと考えてみたんですが、
タグ検索の場合に色を変えるのは、以下でできそうな気がします。

if ("<%tag_word>" != "") {
$(".highlight").css({"background":"#dedede"});
}

試してみる際はさいごの「});」の前に書いてくださいね。