3

まず第一に、はい、ハイライトjqueryプラグインがたくさんあることは知っています。私はそれらを見て満足しましたが、今私が聞きたい質問があります!

7kb のプラグインを使用する必要があるのはなぜですか? これは2行のコードで解決する必要があります...

これが私がやっていることです。私は自分の webapp で検索していて、一致する部分を強調表示したいです。たとえばab、検索クエリとして " " を入力すると、これらの結果が Ajax によって HTML に読み込まれます。

<div class="blah"><h3><a>Abicert</a></h3></div>
<div class="blah"><h3><a>The aboony test</a></h3></div>
<div class="blah"><h3><a>Abnormal abiba!!!</a></h3></div>

したがって、上記の結果では、次のようにすべての " ab" が強調表示されます。

アビサート_

アブーニーテスト

アブノーマルアブイバ!!!

したがって、私のjQueryは次のとおりです。

$('.blah h3 a').each(function(){
    var text = $(this).text();
    var searched_text = 'ab';
    // MY QUESTION HERE - How to highlight part of this text
});

私が言及する必要があるもう1つのことは、ユーザーがab anotherquery検索クエリとして「」を入力する可能性があるため、これをスペースで区切り、結果ですべての「ab」と「anotherquery」を強調表示する必要があることです。

これを学びたいのですが、既製のプラグインで解決できなかったわけではありません...

前もって感謝します

4

1 に答える 1

3

RegExp とpreg_quote (正規表現で使用される文字を処理します) を使用します。

function preg_quote( str ) {
    // http://kevin.vanzonneveld.net
    // +   original by: booeyOH
    // +   improved by: Ates Goral (http://magnetiq.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Onno Marsman
    // *     example 1: preg_quote("$40");
    // *     returns 1: '\$40'
    // *     example 2: preg_quote("*RRRING* Hello?");
    // *     returns 2: '\*RRRING\* Hello\?'
    // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
    // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'

    return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}


$('.blah h3 a').each(function(){
    var text = $(this).text();
    var searched_text = 'ab la';
    var keywords = searched_text.split(' ');
    keywords = $.map(keywords, preg_quote);
    $(this).html(text.replace(new RegExp("(" + keywords.join('|') + ")" , 'gi'), "<b>$1</b>"));
});​

これにより、検索クエリがスペースで分割され、各一致が < b >でラップされます。

デモ (JSFiddle)

于 2013-01-04T19:56:18.750 に答える