Clever Geek Handbook

ページ上のテキストを検索および強調表示する（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び申し上げます-終了し、共有することにしました。これは初期バージョンのみです


More articles:


All Articles