4

ドキュメント内の単語の出現箇所をすべてハイライトしたいと考えています。このために、次のコードを作成しました。

function highlight_search_param() {
    // get the search_param from location.search
    filters = location.search.substr(1).split('&')
    search_param = ''
    for (i in filters) {
        param = filters[i].split('=')
        if (param[0] == 'q') {
            search_param = param[1];
            break;
        }
    }
    if (search_param == '') return True
    alert(search_param)

    // convert into many possible cases
   title_search_param = search_param = search_param[0].toUpperCase() +              search_param.substring(1)
          $('.summary-block').contents().find(':contains("'+search_param+'"),:contains("'+search_param.toLowerCase()+'"),:contains("'+title_search_param+'"),:contains("'+search_param.toUpperCase()+'")').each(function(){
        if($(this).text().indexOf(search_param)>=0) {
            $(this).html($(this).text().replace(search_param, "<span class='highlight'>" + search_param +"</span>"));
    }



})
}

今、私は を上書きしているのでtext()、スパンはテキストとして表示されます。（明らかに）

を上書きするとhtml()、他の要素 (そのテキスト ノードの兄弟) が消去される可能性があります。

ノート。

  • $('.summary-blockページには )がたくさんあります
  • 検索では大文字と小文字を区別しない必要がありますが、置換は大文字と小文字をそのままにしておく必要があります
  • search_param内部の複数のオカレンスが存在する可能性がありますsummary block

ctrl+F基本的に、ブラウザの動作に似たものを探しています

(フィドル)[http://jsfiddle.net/bYhxs/]

4

1 に答える 1

3

次のようなことをしてみませんか:

$(".summary-block").each(function () {
  $(this).html(function (index, oldHTML) {
    return oldHTML.replace(
      search_param, 
      "<span style='color:green;'>" + search_param + "</span>");
  });

});

JSフィドル

これは非常に少ないコードであり、Html ではなく、要素のテキストのみを調べます。

編集:コメントに従って、複数の.summary-block要素で動作するようにこれを更新しました。

編集：あなたの新しい編集に従って。上記のフィドルを参照してください。基本的に、RegExp オブジェクトを作成し、代わりに置き換えるパターンを指定します。

var pattern = new RegExp(search_param, 'gi');
//..
replace(pattern, "<span style='color:green;'>" + search_param +"</span>")
..//

詳細については、この投稿を参照してください。

大文字と小文字を区別しないJavaScriptは、単語の境界を考慮して正規表現を置き換えます

注目に値するのは、今チェックを含むすべてが必要というわけではないということです。この最終的なコードを使用してください：

var search_param = "seaRching";
var pattern = new RegExp(search_param, 'gi');

$(".summary-block").each(function(){
   $(this).html($(this).html().replace(
       pattern, "<span class='highlight'>" + search_param +"</span>"
       )
   );

});

更新されたフィドル

于 2013-06-15T09:09:05.767 に答える