🏇🏻 🐷 🐀 jQueryを使用してページを検索する 👩🏾‍🚀 👩🏼‍⚖️ 👩🏽‍🤝‍👩🏻

多くのサイト訪問者は、Ctrl + Fを押してページ検索を認識せず、テキストをめくるだけで目的のフラグメントを目で探しています。テキストのページに3つまたは4つ以上の画面がある場合、この方法は問題になります。そのような訪問者のために、jQueryを使用してページ検索を実装することにしました。
そのような検索の例は、ロシア連邦憲法のウェブサイトにありますが、そこではどういうわけか奇妙に動作します。

警告

私はプロのプログラマーではありません。曲線のコードや自転車の可能な発明を蹴らないでください。

HTMLフォーム

まず、検索フォームのHTMLコードをページに配置します。フォームには、テキストを入力するフィールドと検索結果を表示するDIVの2つの要素が含まれます。

<input id="spterm" type="text" name="spterm" placeholder=" ?"><br /> <div id="spresult"> </div>

CSS

2つのスタイルを設定します。1つ目はフラグメントを強調表示し、2つ目は最初のフラグメントを参照します。

 span.highlight { background-color: #C6D9DB; cursor: pointer; } span.splink { color: #0A5794; cursor: pointer; }

検索のカスタマイズ

  var minlen = 3; //    var paddingtop = 30; //     var scrollspeed = 200; //   var keyint = 1000; //

フラグメントの強調表示

基本機能-テキスト内のフラグメントを強調表示します。これは、正規表現を使用して行われます。

 function dosearch() { term = jQuery('#spterm').val(); jQuery('span.highlight').each(function(){ //   jQuery(this).after(jQuery(this).html()).remove(); }); var t = ''; jQuery('div.entry-content').each(function(){ //      jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); //    n = jQuery('span.highlight').length; //    console.log('n = '+n); if (n==0) jQuery('#spresult').html('  '); else jQuery('#spresult').html(': '+n); }); } jQuery('#spterm').keyup(function(){ if (jQuery('#spterm').val()!=term) // ,    if (jQuery('#spterm').val().length>=minlen) { //    dosearch(); //    ,    } else jQuery('#spresult').html(' '); //   ,    DIV   });

フラグメント間の遷移

フラグメントを選択するだけでは十分ではありません。フラグメント間のクイックトランジションを整理する方がはるかに便利です。フォームの下に、最初に見つかったフラグメントへのリンクを配置します。矢印の代わりにならないように、各フラグメントをクリックすると次へ進みます。最後のフラグメントをクリックすると、ユーザーは検索フォームに戻ります。

  if (n==0) jQuery('#spresult').html('  '); else jQuery('#spresult').html(': '+n); if (n>1) //    ,      { var i = 0; jQuery('span.highlight').each(function(i){ jQuery(this).attr('n', i++); //  ,         }); jQuery('span.highlight').not(':last').attr({title: ',     '}).click(function(){ //  ,  ,   jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n')+'):first').offset().top-paddingtop}, scrollspeed); //     }); jQuery('span.highlight:last').attr({title: ',     '}).click(function(){ jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); //     }); }

検索開始遅延

大きなテキストの検索と強調表示には数秒かかり、ページがフリーズします。長い単語を入力すると、各文字が入力された後に検索が実行されます。

  jQuery('#spterm').keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // ,    if (jQuery('#spterm').val().length>=minlen) { //    setTimeout(function(){ //    var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) //     dosearch(); //    ,    }, keyint); } else jQuery('#spresult').html(' '); //   ,    DIV   });

ボーナス

<a name="...">を使用せずに、ページ上のテキストへのリンクを作成する機能を追加します。ページへのリンクを作成し、＃テキストを追加するだけで十分です。

  if (window.location.hash!="") //  { var t = window.location.hash.substr(1, 50); //   jQuery('#spterm').val(t).keyup(); //      jQuery('#spgo').click(); //     }

全コード

 jQuery(document).ready(function(){ var minlen = 3; //    var paddingtop = 30; //     var scrollspeed = 200; //   var keyint = 1000; //     var term = ''; var n = 0; var time_keyup = 0; var time_search = 0; jQuery('body').delegate('#spgo', 'click', function(){ jQuery('body,html').animate({scrollTop: jQuery('span.highlight:first').offset().top-paddingtop}, scrollspeed); //     }); function dosearch() { term = jQuery('#spterm').val(); jQuery('span.highlight').each(function(){ //   jQuery(this).after(jQuery(this).html()).remove(); }); var t = ''; jQuery('div#content').each(function(){ //      jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); //    n = jQuery('span.highlight').length; //    console.log('n = '+n); if (n==0) jQuery('#spresult').html('  '); else jQuery('#spresult').html(': '+n+'. <span class="splink" id="spgo"></span>'); if (n>1) //    ,      { var i = 0; jQuery('span.highlight').each(function(i){ jQuery(this).attr('n', i++); //  ,         }); jQuery('span.highlight').not(':last').attr({title: ',     '}).click(function(){ //  ,  ,   jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n')+'):first').offset().top-paddingtop}, scrollspeed); //     }); jQuery('span.highlight:last').attr({title: ',     '}).click(function(){ jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); //     }); } }); } jQuery('#spterm').keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // ,    if (jQuery('#spterm').val().length>=minlen) { //    setTimeout(function(){ //    var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) //     dosearch(); //    ,    }, keyint); } else jQuery('#spresult').html(' '); //   ,    DIV   }); if (window.location.hash!="") //  { var t = window.location.hash.substr(1, 50); //   jQuery('#spterm').val(t).keyup(); //      jQuery('#spgo').click(); //     } });

短所

大きなページ（約60 kbのテキスト）では、スクリプトは数分間フリーズします。

デモ： http : //jsfiddle.net/6c3ph7uj/2/

ご静聴ありがとうございました。スクリプトを改善するためのコメントとアイデアに感謝します。

jQueryを使用してページを検索する

警告