JavaScriptで検索バーを作成してページ上のテキストを見つけてハイライト表示する方法

Question

多くのコンテンツを含むサイトを作成しようとしていますが、JavaScriptをまだ学んでいて、検索バーに入力され、ページ上で検索され、ハイライト表示されます。余分なボーナスポイントは、もしあなたがそれを検索しても、それも検索を入力します。 ; P

Answer 1

イベントバーナーにイベントリスナーを設定して、変更があるたびに画面上のすべてのテキストを調べ、そのテキストを検索バーの値と比較します。一致するものがある場合、プログラムは '一致'を '<span class=highlight>match</span>'に置き換えます。基本的に一致するテキストを強調表示するCSSクラスのスパンを追加します。

コードを表示せずに例を挙げるのは難しいでしょうが、この無料コースhttps://javascript30.com/ビデオ＃6に私が従った素晴らしいガイドがあります。私はどのような方法でコースに所属していませんが、それは私の多くを助けてきました。

Answer 2

さて、私はテーブルで検索し、唯一のマッチング結果を表示するには、これを実行していますが、ページ全体で検索し、テキストをハイライト表示するために、それはこのようなものでなければなりません：

$('#your_input_id').bind('keyup change',function(){ 
    search = $(this).val().toLowerCase(); 
    var re = new RegExp(search, 'g'); 

    $('*').each(function(){ 
     $(this).css('background-color', 'transparent'); 
     target = $(this).text().toLowerCase(); 
     if(target.match(re) || target.match('^' + search)){ 
      $(this).css('background-color', 'yellow'); 
     } 
    }); 
}); 

PS ：私は私の答え30を削除していた/

---

：私は、ページ全体でそれを試したことがないので、それは、jQueryのすべてのセレクター*と協力し、おそらくそれが原因でそのセレクタを使用するのでは時間がかかりすぎるだろうかどうかわかりません分前に、私はそれが動作しないと思うので（私はテストしていませんでしたが、コードを改善すると助けになるので削除しませんでした）