代码之家  ›  专栏  ›  技术社区  ›  Chen Kinnrot

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

  •  13
  • Chen Kinnrot  · 技术社区  · 16 年前

    如何在html页面中搜索单词fast? 我怎样才能得到这个单词所在的html标签呢?(因此我可以使用整个标记)

    4 回复  |  直到 16 年前
        1
  •  21
  •   nickf    16 年前

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

        2
  •  6
  •   vartec    16 年前

    您可以遍历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;
    }
    
        3
  •  1
  •   Azder    16 年前

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

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

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

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

        4
  •  0
  •   glenatron    16 年前

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

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

        5
  •  0
  •   Mohammed Adil    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;
            }
        }
    }
    

    });