javascript - 使用 javascript 在页面上搜索

Question

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

注意，这很重要:只有纯 javascript，没有像 jQuerys 等库!

谢谢。

Answer 1

更新的答案:

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

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

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

   这非常适合交互式操作，但每次都重新输入有点麻烦。您还可以将代码放在本地文件中(例如 /home/tjc/foo.js )，然后当您转到页面时，使用控制台将该脚本附加到页面(这将导致它在页面上下文中执行), 就像这样:

    document.documentElement.appendChild(document.createElement('script')).src = "file:///home/tjc/foo.js";
   

2. 一旦您的脚本执行了您想要的操作，您可能希望将它变成一个 bookmarklet .这是使用 javascript: 的浏览器书签计划而不是通常的http:等等。有关详细信息，请参阅链接。您需要一个工具来获取您的 JavaScript 代码并为您执行必要的 URL 编码，例如 Bookmarklet Crunchinator或类似的。

---

原始答案:

... so that it will find text, or get element by id/class...

这是三个截然不同的问题:

1. 要在页面上查找文本，您有两种选择:

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

      这是一个计算单词 I'm 的例子在页面上使用 innerHTML : live copy | 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 nodes , 查看其中的文字。这是一个基本示例(函数是 walk 函数):Live copy | 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);
         }
      
       })();
      

2. 通过id查找页面上的元素, 使用 document.getElementById .

3. 通过class查找页面上的元素, 在大多数现代浏览器上，您可以使用 getElementsByClassName 或 querySelectorAll .

注意示例:我正在使用 JSBin ，默认情况下，它会将您在“源” View 左侧看到的 JavaScript 放在您在右侧看到的 HTML 的末尾(就在结束 </body> 标记之前) .这符合 best practices .

阅读:

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Application APIs