使用javascript在html页面中查找单词

Question

如何快速搜索 html 页面中的单词？ 我怎样才能得到这个词所在的html标签？ （所以我可以使用整个标签）

Answer 1

要找到单词所在的元素，您必须遍历整个树，只查找文本节点，应用与上述相同的测试。 在文本节点中找到单词后，返回该节点的父节点。

var word = "foo",
    queue = [document.body],
    curr
;
while (curr = queue.pop()) {
    if (!curr.textContent.match(word)) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE : // 3
                if (curr.childNodes[i].textContent.match(word)) {
                    console.log("Found!");
                    console.log(curr);
                    // you might want to end your search here.
                }
                break;
            case Node.ELEMENT_NODE : // 1
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}

这适用于 Firefox，对 IE 没有承诺。

它所做的是从 body 元素开始，并检查该元素中是否存在该单词。 如果没有，那么就是这样，搜索就到此为止。 如果它在 body 元素中，那么它会遍历 body 的所有直接子元素。 如果找到文本节点，则查看该单词是否在该文本节点中。 如果找到一个元素，则将其推入队列。 继续前进，直到您找到该词或没有更多要搜索的元素为止。

Answer 2

您可以遍历 DOM 元素，在其中查找子字符串。 既不快速也不优雅，但对于小型 HTML 可能足够好。

我会尝试一些递归的，比如：（代码未经测试）

findText(node, text) {
  if(node.childNodes.length==0) {//leaf node
   if(node.textContent.indexOf(text)== -1) return [];
   return [node];
  }
  var matchingNodes = new Array();
  for(child in node.childNodes) {
    matchingNodes.concat(findText(child, text));
  }
  return matchingNodes;
}

Answer 3

您可以尝试使用 XPath，它既快速又准确

http://www.w3schools.com/Xpath/xpath_examples.asp

此外，如果 XPath 有点复杂，那么您可以尝试任何 javascript 库，例如 jQuery，它隐藏样板代码并更容易表达您想要找到的内容。

此外，从 IE8 和下一个 Firefox 3.5 开始，也实现了 Selectors API。 您需要做的就是使用 CSS 来表达要搜索的内容。

Answer 4

form.addEventListener("submit", (e) => {
e.preventDefault();
var keyword = document.getElementById("search_input");
let words = keyword.value;
var word = words,
    queue = [document.body],
    curr;
while (curr = queue.pop()) {
    if (!curr.textContent.toUpperCase().match(word.toUpperCase())) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE: // 3
                if (curr.childNodes[i].textContent.toUpperCase().match(word.toUpperCase())) {
                    console.log("Found!");
                    console.log(curr);
                    curr.scrollIntoView();
                }
                break;
            case Node.ELEMENT_NODE: // 1
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}

});

Answer 5

您可能可以读取文档树的主体并足够快地对其执行简单的字符串测试，而不必超出此范围 - 不过这在一定程度上取决于您正在使用的 HTML - 您对页面有多少控制? 如果您在您控制的站点内工作，您可能可以将搜索重点放在可能与页面不同的页面部分，如果您正在处理其他人的页面，那么您手头的工作就更难了，因为您不一定知道需要针对哪些内容进行测试。

同样，如果您要多次搜索同一页面并且您的数据集很大，则可能值得在内存中创建某种索引，而如果您只想搜索几个词或使用较小的文档，则可能不会值得花费时间和复杂性来构建它。

可能最好的办法是获取一些您认为具有代表性的示例文档，然后根据人们在此处提供的方法进行大量原型设计。