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

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的所有直接子元素。如果它找到一个文本节点,则查看该单词是否在该文本节点中。如果它找到一个元素,则将其推入队列。继续,直到你找到了这个词或者没有更多的元素可以搜索。

您可以遍历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;
}

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

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

另外,如果XPath稍微复杂一点,那么您可以尝试任何javascript库,比如jQuery,它隐藏样板代码并使您更容易表达您想要找到的内容。

此外,从IE8和下一代Firefox3.5开始,还实现了选择器API。您所需要做的就是使用CSS来表示要搜索的内容。

您可能可以读取文档树的主体并对其执行简单的字符串测试 不必超出这个范围——这有点取决于您使用的HTML——您对页面有多大的控制权?如果你在自己控制的网站中工作,你可能会把搜索重点放在页面中可能与页面不同的部分,如果你在处理其他人的页面,你手头的工作会更艰难,因为你不一定知道需要测试哪些内容。

也许最好的办法是获取一些您认为具有代表性的示例文档,并根据这里提供的方法进行大量原型制作。

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

});