コンピューター100%

ページ内検索機能をつける

  • 簡単な説明

  •  Javascriptを使い、ページ内の文字を検索して移動する方法を紹介します。
     このページにもつけてありますので、上のテキストボックス内に、ページ内で使われている文字を入力して、[検索]ボタンを押してみてください。
     検索した文字が最上部に移動したと思います。ただし、検索した文字がページの下底にある場合には、上部には来ません。また、見つからなかった場合には変化はありません。

  • 方法

    • 指定した範囲(<DIV> - </DIV>で囲みます)の文字を取り出し、その中から検索文字の位置を調べます。

    • 見つかった場合、その前後を<A NAME="検索文字+連番"> - </A>というタグで囲みます。

    • JavaScriptで"#検索文字+連番"へと移動させます。

  • ソース

    • 検索文字を入力するフォーム部分

    • <DIV STYLE="text-align:right;vertical-align:baseline;font-size:10pt;"><FORM name=serch action="javascript:wordserch()">文章内から検索:<INPUT name=q><INPUT type=button onClick="wordserch()" value="検索"></FORM></DIV>
    • 入力された文字を検索する部分

    • <HEAD> - </HEAD>の中に入れてください。
      <SCRIPT LANGUAGE="JavaScript" >
      var serchindex=0;
      var serchcounter=0;
      var serchstr = "";
      var serchwordcounter=0;
      var start=0;
      function wordserch(){
      if(serchstr != document.serch.q.value){serchindex=0;serchwordcounter=0;}
      serchstr = document.serch.q.value;
      var bCrumb = new Array();
      var i;
      while(serchstr.indexOf(' ')>=0){serchstr = serchstr.replace(" "," ");}
      while(serchstr.indexOf('|')>=0){serchstr = serchstr.replace("|"," ");}
      while(serchstr.indexOf('&')>=0){serchstr = serchstr.replace("&"," ");}
      bCrumb=serchstr.split(" ");
      for(i=serchwordcounter;i<bCrumb.length;i++){
      serchstring = bCrumb[i];
      serchcounter++;
      ref=serch(serchstring);
      if(!ref){alert('検索単語が見つかりません');}
      if(ref==true && start>=0){
      break;
      }else if(ref==true && start<0){
      serchwordcounter++;
      serchindex=0;
      break;
      }else{
      serchwordcounter++;
      serchindex=0;
      }
      }
      }
      function serch(txt,index){
      var before,txt,after,objstr;kazu=0;
      var serchstr=txt;
      objct = document.getElementById('UR');
      str = objct.innerHTML;
      start = str.indexOf(serchstr,serchindex);
      if(start>0){
      before=str.substring(0,start);
      txt="<B><A NAME='serchstr"+serchcounter+"'>"+serchstr+"</A></B>";
      after=str.substring(start+serchstr.length);
      objstr = before+txt+after;
      if(navigator.appName.indexOf("Microsoft")>-1){
      objct.innerHTML = objstr;
      location.hash = "#serchstr"+serchcounter;
      }else{
      document.clear();
      document.open();
      document.write(objstr);
      document.close();
      location.hash = "#serchstr";
      }
      serchindex=start+txt.length;
      start = str.indexOf(serchstr,serchindex);
      return true;
      }else{
      return false;
      }
      }
      </SCRIPT>
    • 検索対象範囲を囲む

    • <DIV ID="UR">
        ・
        ・
      (この中にいれた文章などが、検索の対象となります。
      "UR"というIDをすでに使用している場合は、上のスクリプト内の [objct = document.getElementById('UR');]の部分と合わせて他の名前に変更してください。)
        ・
        ・

      </DIV>

  • 全体の構成

  • 以上の3つをくみ合わせると以下のようになります。

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    function wordserch(){   
    中略
    }

    function serch(txt,index){   
    中略
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <DIV STYLE="text-align:right;vertical-align:baseline;font-size:10pt;"><FORM name=serch action="javascript:wordserch()">文章内から検索:<INPUT name=q><INPUT type=button onClick="wordserch()" value="検索"></FORM></DIV>

    <DIV ID="UR">
      ・
      ・
      ・
      ・
    </DIV>
    </BODY>
    </HTML>
    注意すべき点は、スクリプトの部分は<HEAD> - </HEAD>の中に入れることと、検索用のフォームの部分は、検索対象の範囲(<DIV ID="UR"> - </DIV>)の外に配置することです。

  • 追加説明

  •  この検索機能は、InternetExplorer5.0以上ではウィンドウ内でスクロールして移動、Netscapeではドキュメントを書き出し、その中をスクロールして検索文字まで移動します。
     [次を検索]は連続して押してください。いちいち戻るのが大変な場合、BODYに、[onKeyPress="javascript:if(event.keyCode==102){wordserch();}"]の属性を追加してください。これで[f](DとGの間)キーを押すことにより、どんどん次の語句が検索されていきます。
     複数の単語をスペースで区切って入力してあった場合、1番目の単語から検索していき、検索し終わったら続いて2番目、3番目と検索されていきます。  なお、IEには、[編集]-[このページを検索]という、立派な検索機能が備わっています。こちらを使用していただいた方が確実です。
     

  • Googleからの検索単語にダイレクトに移動

  •  応用として、このスクリプトを利用して、検索エンジンGoogleから検索されて飛んできた場合、検索された単語や語句のキーワードをURLから読みとって、自動で検索し、その場所に移動させる事ができます。
     日記などさまざまなジャンルをごちゃごちゃに書いている場合はすぐに目的とするところに飛べるので便利かもしれません。
     ただし、IE5.5以上、Netscape6.0以上でしか動作しません。
     (まぁ、最近はIE5.0は非常に少なくなってきていますので。)

  • 追記:検索エンジン(Google)から来た場合、検索された文字を読みとって移動

  • 以下を追加します。

    <SCRIPT>
    function init(){
    if(navigator.appName=="Netscape"){Loaded();}
    if(navigator.appName=="Microsoft Internet Explorer"){
    if((navigator.appVersion).indexOf('MSIE 5.0')>-1){Loaded();}
    if((navigator.appVersion).indexOf('MSIE 5.5')>-1){Loaded();}
    if((navigator.appVersion).indexOf('MSIE 6.0')>-1){Loaded();}
    }
    }
    function Loaded(){
    var sName = new Array();var sSite = new Array();
    sName[0] = "q";sSite[0]="google";
    sName[1] = "p";sSite[1]="yahoo";
    sName[2] = "query";sSite[2]="lycos";
    sName[3] = "search";sSite[3]="excite";

    var ref="";site="";num=0;
    ref = document.referrer;
    site = ref.substring(0,ref.indexOf("?"));
    ref = ref.substring(ref.indexOf("?")+1);
    for(i=0;i<sName.length;i++){if(site.indexOf(sSite[i])>-1){num=i;}};
    var refSplit = ref.split("&");
    var serchword = new Array();
    for ( var i = 0 ; i < refSplit.length ; i++){
    var aCrumb = refSplit[i].split("=");
    if (sName[num] == aCrumb[0]){
    var bCrumb = new Array();
    if(num==0){
    var i;
    while(aCrumb[1].indexOf(' ')>=0){aCrumb[1] = aCrumb[1].replace(" "," ");}
    if((navigator.appVersion).indexOf('MSIE 5.0')>-1){
    while(aCrumb[1].indexOf('+')>=0){aCrumb[1]=aCrumb[1].replace("+"," ");}
    aCrumb[1]=unescape(aCrumb[1]);
    serchword=aCrumb[1].split(" ");
    }else{
    serchword=decodeURIComponent(aCrumb[1]).split(" ");
    }
    }
    }
    }
    if(serchword.length>0){
    for(i=0;i<serchword.length;i++){
    ref=serch(serchword[i]);
    if(ref==true){document.serch.q.value=serchword[i];break;}
    }
    }
    }

    </SCRIPT>
    <BODY OnLoad="init()" onKeyPress="javascript:if(event.keyCode==102){wordserch();}">

  • フレーム間で使用する場合

  • フレームを使用して、片側に検索文字を入力するフォームを設置し、もう片方を、検索対象の文章にすることで、フレーム間での検索&移動も行えます。
    検索文字を入力するフォームを表示するフレームに検索を行うスクリプト(<SCRIPT LANGUAGE="JavaScript">〜</SCRIPT>)を記述し、<DIV ID="UR">〜</DIV>はもう一方のフレームに記述します。
    そして、スクリプトを変更します。
    「parent.検索対象のフレーム名」を一部の行の「document」や「location」に付けます。
    検索対象のフレーム名は、フレームを定義するさいに、「<FRAME SRC="bottom.html" NAME="ここで定義された名称"」のことです。
    変更する個所は次のとおりです。
    まず、「function serch(txt,index){」という行を探してください。変更はここより後になります。
    その下3行目、
    objct = document.getElementById('UR');
    を、次のように変更してください。「parent.検索対象のフレーム名.」を追加します。
    objct = parent.検索対象のフレーム名.document.getElementById('UR');
    一例として、検索対象のフレーム名が「bottom」なら、次のようになります。
    objct = parent.bottom.document.getElementById('UR');
    そしてその10行目ぐらいの次の行も変更します。
    location.hash = "#serchstr"+serchcounter;
    parent.検索対象のフレーム名.location.hash = "#serchstr"+serchcounter;
    そして、その2行あとも次のように変更してください。
    document.clear();
    document.open();
    document.write(objstr);
    document.close();
    location.hash = "#serchstr";
    parent.検索対象のフレーム名.document.clear();
    parent.検索対象のフレーム名.document.open();
    parent.検索対象のフレーム名.document.write(objstr);
    parent.検索対象のフレーム名.document.close();
    parent.検索対象のフレーム名.location.hash = "#serchstr";
    全部で7行変更すれば終わりです。

  • 最後に

  •  このページ内検索を、よりよいものにするためにアドバイスをしてくださった、♪Toyoaki MIDI BOX !元管理人、Toyoaki様に感謝の念を示したいと思います。
     (現在運営をされておられません。)  連続検索と、複数単語サポートの実装は、Toyoaki様のおかげです。
     実際に、ページ内検索をつけて使ってくださっていることにも重ねて感謝致します。

     また、フレーム間で使用できるようにするきっかけを作ってくださった亀仙人様にも感謝いたします。  亀仙人様のHP:http://www.shinyroad.com/

ページ内検索
文章内から検索:
ランキング
著作権表記
Copy right © Ship.
PR