使用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元素开始,检查该元素内是否存在该单词.如果没有,那就是它,搜索就在那里停止.如果它在身体元素中,那么它会遍历身体的所有直接孩子.如果找到文本节点,则查看该单词是否在该文本节点中.如果找到一个元素,则将其推入队列.继续,直到你找到了这个词,或者没有更多的元素可以搜索.

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;
}