ページ上のテキストを検索および強調表示する（JavaScript-jQuery）

私は、ページではなく、テキストではなく、サーバーの検索ではなく、通常の検索が必要でした。 つまり、多くのテキストがあるページをダウンロードし、読んで、必要に応じて見てください。 私はインターネットを調べましたが、残念ながら、実装に複雑なものは何もありませんでしたが、オプションが見つかりませんでした（単語間の遷移とページのスクロール）。
これで終わりです。最初のオプションを共有することにしました。

jQueryライブラリー自体が使用されます。
基礎として、 jQueryの記事を取り上げました。 ここから テキストまたはHTMLの単語を強調表示 します （ その例 ）。 スクリプトをページに接続する方法はそこに記述されています。

以下で「単語」=「フレーズ」=「文字および/または記号のフレーズ」を使用します。

機能の拡張を始めましょう。

検索ボタン、次の単語と前の単語を強調表示、選択した単語にページをスクロール

1）特定の単語を強調表示する
jquery.highlight.jsファイルに追加します

jQuery.fn.selectHighlight = function(number) { return this.find("span.highlight:eq("+number+")").addClass('selectHighlight').end(); }; 

2）スタイルで、強調表示された単語の表示を規定し、自分用に強調表示スタイルを変更します

 .highlight { background-color: gray; color: white } .selectHighlight { background-color: rgb(35, 140, 0) } 

3）ボタンと入力フィールドを作成する

 <div id="search_block"> <label> Search: <input id="search_text" type="text" value=""/> </label> <input id="search_button" type="button" value="Search"/> <input id="prev_search" type="button" value="<"/> <input id="next_search" type="button" value=">"/> <input id="clear_button" type="button" value="Clear"/> </div> 

4）アクションボタンを割り当てる
コードをコピーします。

（この機能の目的を以下に説明します）

 function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); } 

  var search_number = 0; //     var search_count = 0; //   //search -       "search_button" $('#search_button').click(function() { $('#text').removeHighlight(); txt = $('#search_text').val(); if (txt == '') return; $('#text').highlight(txt); search_count = $('#text span.highlight').size() - 1; search_number = 0; $('#text').selectHighlight(search_number); //     scroll_to_word(); //     }); //clear -       "clear_button" $('#clear_button').click(function() { $('#text').removeHighlight(); }); //prev_search -           $('#prev_search').click(function() { if (search_number == 0) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number--; $('#text').selectHighlight(search_number); scroll_to_word(); }); //next_search -           $('#next_search').click(function() { if (search_number == search_count) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number++; $('#text').selectHighlight(search_number); scroll_to_word(); }); 

5）
function scroll_to_word(){...} -必要な単語にページをスクロール（巻き戻し）する機能
まあ、一般的に、 ここから簡単なjqueryscrolltoプラグインを使用して.highlightクラスと番号eq('+search_number +') （ search_numberグローバルスクリプト変数のリストを見てくださいeq('+search_number +')探すのは非常に簡単です。

 jQuery('#content').scrollTo('.highlight('+search_number +')'); 

しかし、ブラウザではなくページ用に独自のスクロールが必要であるため、 このプラグイン （jqwidgets）のセットを使用する必要があったため、それらのAPIを使用しました。
scrollTo メソッド
特定の位置までスクロールします。
コード例
scrollToメソッドを呼び出します。

 $('#jqxPanel').jqxPanel('scrollTo', 10, 20); 

 function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); // 5 -            -    } 

デモ
キャンペーンについては以上です。
最適化されていないコードについておaび申し上げます-終了し、共有することにしました。これは初期バージョンのみです