JavaScript でページ内検索をしてヒットした件数を取得したい


Chrome を使って、テキストボックスに入力した文字列がそのページに何件あるかを表示するプログラムを考えています。
JavaScript の window.find を使うのだと思いますが、具体的にうまくできません。

関数部分だけで結構ですので、どのように記述すればよいか教えてください。


ローカル専用です。自分しか使いません。
基本は Chrome、できれば Firefox と IE で動けばなおよしです
文字列入力と JavaScript に渡すところ、件数を HTML に出力するところはなくてもOKです (あれば嬉しいですが)。
OS は Windows, Chrome は 4.0 です。

回答の条件
  • URL必須
  • 1人1回まで
  • 登録:
  • 終了:2010/01/13 12:28:44
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:ofk No.1

回答回数12ベストアンサー獲得回数3

ポイント80pt

http://example.com/ (dummy)

window.findは検索ダイアログを出す関数であるので今回の目的に利用することはできません.

個数を数える場合は自分で記述する必要があります.

簡易的な物だと以下のようになります.

function search_count(text, search) {
  return (text+"").split(search).length - 1;
}
var input = "JavaScript"; // document.getElementById("input").value等で取得する
alert(search_count(document.documentElement.textContent, input)); // 大文字小文字を区別する場合
alert(search_count(document.documentElement.textContent, new RegExp(input.replace(/\W/g, "\\$&"), "i"))); // 大文字小文字を区別しない場合
id:Nigitama

正常に動作することを確認しました。

return (text+"").split(search).length - 1; のところ、「-1」は不要のようです。

大文字小文字のパターンも作っていただきありがとうございました。

2010/01/10 01:33:43
  • id:Cherenkov
    この問題を解決するにはプログラムは必要ありません。
    Ctrl+Fで入力フォームが現れ、文字列を入力すると件数が表示されます。
  • id:Reiaru
    Internet Explorer やら Firefox やら用。Chrome は使っていませんので(笑)


    <html>
    <head>

    <script language="JavaScript">
    <!--
    function String_Count(search_string){
      var document_string;           // ページ内に存在するテキスト
      var str_length = search_string.length;  // ページ内に存在するテキストの文字列長
      var string_count = 0;           // 見つかった検索語の数
      var i = 0;                // カウンタ

      if (search_string == ""){
        alert("検索文字列が入力されていません。");
        return;
      }

    if(navigator.userAgent.indexOf("MSIE") > -1){
        document_string = document.body.innerText;
      }else{
        document_string = document.body.textContent;
      }

      while((i = document_string.indexOf(search_string,i)) != -1){
        i += str_length;
        string_count ++;
      }

      // 見つかった件数の表示
    //  alert(string_count);      
      document.getElementById('answer_view').innerHTML = '見つかった件数は ' + string_count + ' 件';
    }
    //-->
    </script>

    </head>

    <body>
      <!- テスト -->
      aaaaaaaaaa<br>
      aa test aa<br>
      bbbbbbbbbb<br>
      <br>
      <font color="#FF8888">Java</font><font color="#8888FF">Script</font> でページ内<b>検索をしてヒットした件数</b>を取得したい<br>
      <br>
      <!- テスト -->

      <form>
      <input type=text name="Search_Text">
      <input type="button" onclick="String_Count(Search_Text.value);" value="検索">
      </form>

      <!-- 結果表示用 -->
      <div id="answer_view">
      </div>
    </body>
    </html>
  • id:Nigitama
    Cherenkov さん
    コメントありがとうございます。
    今回は、input="text" を複数用意して、複数の語の個数を同時に画面上に表示する必要があったのでこのような質問となりました。

    Reiaru さん
    完全ソースありがとうございます。
    Chrome でも動作することを確認しました。
    ofk さんのと組み合わせてみようと思います。
    助かりました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません