javascript - 使用 javascript 在页面上搜索

Question

我有一个 html 页面，我想在上面找到一些数据，但主要问题是该页面是在服务器上生成的，我想在本地机器上编写 javascript 代码并运行它。那么如何在本地机器上编写和运行 javascript 代码，以便它可以找到文本，或者通过 id/class 获取元素？

注意，这很重要：只有纯 javascript，没有像 jQuerys 之类的库！

谢谢你。

score 4 · Accepted Answer

更新答案：

起初我不明白你想调用一个你无法控制的网页，然后在你的浏览器中使用 JavaScript 与之交互。

下面原始答案中的信息仍然相关，但问题是：如何使代码在正确的上下文中运行？答案是：至少有两种方法：

现在任何像样的浏览器都有内置的调试工具。在菜单上查看它们，但在许多浏览器中，它们可以通过F12键或Ctrl++Shift访问I。在这些工具中，您会找到一个“控制台”，您可以在其中键入 JavaScript 并让它在您正在查看的页面的上下文中运行。

这非常适合交互式地做事，但每次都重新输入它有点痛苦。您还可以将代码放在本地文件中（例如，/home/tjc/foo.js），然后当您转到页面时，使用控制台将该脚本附加到页面（这将导致它在页面的上下文中执行），例如这个：
```
 document.documentElement.appendChild(document.createElement('script')).src = "file:///home/tjc/foo.js";
```
一旦你的脚本做你想做的事，你可能想把它变成一个小书签。javascript:这是一个使用该方案而不是通常http:等的浏览器书签。有关详细信息，请参阅链接。您将需要一个工具来获取您的 JavaScript 代码并为您进行必要的 URL 编码，例如Bookmarklet Crunchinator或类似工具。

原始答案：

...以便它可以找到文本，或通过 id/class 获取元素...

这是三个非常不同的问题：

要在页面上查找文本，您有几个选项：

如果您只想查找文本但不太关心包含它的确切元素，则可以innerHTML在document.body. innerHTML是一个字符串；当您访问它时，浏览器会为您调用它的元素（及其后代）中的所有 DOM 元素创建一个 HTML 字符串。请注意，这不是来自服务器的原始内容；这是在您访问元素时即时创建的。对于很多用例，获取此字符串然后查看它可能很有用。请注意，您正在搜索的文本是标记，因此，例如，如果您搜索单词“table”，您可能会在句子（“We sat up at the table.”）或标记（<table>...）中找到它。

I'm这是一个使用以下方法计算页面上单词的示例innerHTML：live copy | 来源- 请参阅末尾有关示例的注释。
```
 (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);
   }

 })();
```

如果您需要准确找出它所在的元素，则需要编写一个遍历页面节点的递归函数，对于Textnodes，查看其中的文本。这是一个基本示例（函数就是walk函数）：Live copy | 来源- 请参阅末尾有关示例的注释。

 (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，在大多数现代浏览器上，您可以使用getElementsByClassName或querySelectorAll。

请注意示例：我使用的是JSBin，默认情况下，它会将您在左侧看到的 JavaScript 放在您在右侧看到的 HTML 的末尾（就在结束</body>标记之前）的“源”视图中. 这符合最佳实践。

阅读：

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