javascript - JavaScript を使用したページ内検索

Question

私は html ページを持っていて、その上でいくつかのデータを見つけたいのですが、主な問題はページがサーバー上で生成され、ローカルマシンで JavaScript コードを記述して実行したいことです。では、テキストを検索したり、id/class で要素を取得したりできるように、ローカルマシンの JavaScript コードを記述して実行するにはどうすればよいでしょうか。

これは重要なことです: 純粋な JavaScript のみで、jQuery などのライブラリはありません!

ありがとうございました。

score 4 · Accepted Answer

更新された回答:

制御できないWeb ページを呼び出して、ブラウザで JavaScript を使用して操作することを最初は理解できませんでした。

以下の元の回答の情報は依然として関連していますが、問題は次のとおりです。正しいコンテキストでコードを実行するにはどうすればよいですか? 答えは: 少なくとも 2 つの方法があります。

最近の適切なブラウザには、組み込みのデバッグツールがあります。それらのメニューを見てください。ただし、多くのブラウザーでは、F12キーまたはCtrl++を介してアクセスできShiftますI。これらのツールには、JavaScript を入力して、表示しているページのコンテキストで実行できる「コンソール」があります。

これは対話的に行うには最適ですが、毎回再入力するのは少し面倒です。コードをローカルファイル (たとえば/home/tjc/foo.js、これ：
```
 document.documentElement.appendChild(document.createElement('script')).src = "file:///home/tjc/foo.js";
```
スクリプトが目的の処理を実行したら、それをブックマークレットに変換することをお勧めします。javascript:これは、通常のスキームなどではなく、スキームを使用したブラウザのブックマークhttp:です。詳細はリンク先をご覧ください。Bookmarklet Crunchinatorなどのように、JavaScript コードを受け取り、必要な URL エンコードを行うツールが必要になります。

元の答え:

...テキストを検索したり、id/class で要素を取得したりできるように...

これらは 3 つの非常に異なる質問です。

ページ上のテキストを検索するには、いくつかのオプションがあります。
1. テキストを見つけたいだけで、それが含まれている要素を正確に気にしない場合は、を調べることができinnerHTMLますdocument.body。innerHTML文字列です。アクセスすると、ブラウザは、呼び出し元の要素 (およびその子孫) 内のすべての DOM 要素の HTML 文字列を作成します。これはサーバーからの元のコンテンツではないことに注意してください。これは、要素にアクセスするときにオンザフライで作成されます。多くのユースケースでは、この文字列を取得してから調べると便利です。検索しているテキストはマークアップであることに注意してください。たとえば、「テーブル」という単語を検索した場合、文 (「テーブルに座った」) またはマークアップ ( <table>...) で見つかる可能性があります。
  
  を使用してI'mページ上の単語をカウントする例を次に示しinnerHTMLます。source - 末尾の例に関する注を参照してください。
```
 (function() {

   var pageText = document.body.innerHTML;
   display('Count of "I\'m" on the page: ' +
           pageText.match(/I'm/g).length);

   function display(msg) {
     var p = document.createElement('p');
     p.innerHTML = String(msg);
     document.body.appendChild(p);
   }

 })();
```
2. それがどの要素に含まれているかを正確に知る必要がある場合は、ページのノードをたどり、ノードの場合は内部のテキストを調べる再帰関数を作成する必要がありTextます。以下は基本的な例です (関数は関数ですwalk)。source - 末尾の例に関する注を参照してください。
```
 (function() {
   var matches = [], index;

   walk(matches, document.body, "");

   function walk(matches, node, path) {
     var child;

     switch (node.nodeType) {
       case 1: // Element
         for (child = node.firstChild; child; child = child.nextSibling) {
           walk(matches, child, path + "/" + node.tagName);
         }
         break;
       case 3: // Text
         if (node.nodeValue.indexOf("I'm") !== -1 ) {
           matches.push("Found it at " + path);
         }
         break;
     }
   }

   display("Matches found (" + matches.length + "):");
   for (index = 0; index < matches.length; ++index) {
     display(matches[index]);
   }

   function display(msg) {
     var p = document.createElement('p');
     p.innerHTML = String(msg);
     document.body.appendChild(p);
   }

 })();
```
ページ上の要素をで検索するにはid、を使用しますdocument.getElementById。
でページ上の要素を見つけるには、最新のブラウザのほとんどでまたはclassを使用できます。getElementsByClassNamequerySelectorAll

例に関する注意: 私はJSBinを使用しています。これは、デフォルトで、右側に表示される HTML の最後</body>(終了タグの直前)の「ソース」ビューの左側に表示される JavaScript を配置します。 . これは、ベストプラクティスに沿ったものです。

読む：

score 1 · Accepted Answer

imacros ソリューションを探している場合は、次のようになります。

 var reportDataTable = window.content.document.getElementById("yoursid");
 if (reportDataTable == null)
 {
    iimPlay("mac1.iim");
 }
 else
 {
    iimDisplay("stop!");
 }

mac1.iim はマクロで、これが繰り返されるまで、

window.content.document.getElementById("yoursid");

成立しません

javascript - JavaScript を使用したページ内検索

2 に答える 2

Related

Reference