Hatena::ブログ(Diary)

130単位

2009-03-19

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>タグでjQuery本体、jquery.highlight-3.jsの順に読み込み

<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ダイアログが現れたりしました。ので、記念にキャプチャ。

f:id:deeeki:20090319022303j:image

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

コードサンプル

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

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

【追記】

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

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

deeekideeeki 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
に紹介されている方法を加え、前後に空白スペースが入ってしまった場合なども除去できるようにして実施して見ました。
ありがとうございました。

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

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

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

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

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

paruparuparuparu 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ブログ用の変数です)
これに、もしキーワードが何もなければ・・・ という機能を付ければということなのだと思いますが、その方法がまだ解りません。。。

deeekideeeki 2010/01/14 13:37 >ナカムラさん

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

deeekideeeki 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行は、キーワード(検索ボックスの内容)が存在した場合に処理をしています。

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

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

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

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

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

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

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

財閥財閥 2014/02/15 23:52 こんにちは。だいぶ時が経っていますが質問させて頂いてもよいでしょうか?

IEの場合ですが(私の環境はIE11)、検索対象に2バイト文字が混在している場合に、一度ハイライト表示し、その後removeHighightが呼ばれると、規則性がわからないのですが2バイト文字を中心に文字列がごっそり削除されてしまいます。

例えばこんな感じ
-----
キーワード:a
検索対象:abcdあいうえfdsdfLA

ハイライト後removeHighightが呼ばれると
検索対象:aA
になる
-----

何か解決方法があればご教授いただけますでしょうか?
よろしくお願いします。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証