查找 HTML 页面中的所有文本节点

11 浏览
0 Comments

查找 HTML 页面中的所有文本节点

为了解决这个问题，我需要在特定节点下找到所有文本节点。我可以这样做：

function textNodesUnder(root){
  var textNodes = [];
  addTextNodes(root);
  [].forEach.call(root.querySelectorAll('*'),addTextNodes);
  return textNodes;
  function addTextNodes(el){
    textNodes = textNodes.concat(
      [].filter.call(el.childNodes,function(k){
        return k.nodeType==Node.TEXT_NODE;
      })
    );
  }
}

然而，考虑到XPath可以简单地查询`".//text()"`，这种方法显得不够优雅。

在HTML文档中，获取特定元素下的所有文本节点的最简单方法是什么，该方法适用于IE9+、Safari5+、Chrome19+、Firefox12+和Opera11+？

"最简单"的定义是宽松的，即"高效且简洁，不包含冗余代码"。

0

2 答案

0 Comments

问题的出现原因是作者想要找出HTML页面中的所有文本节点，然后比较两种方法的效率。作者首先给出了一种使用递归的方法来找出所有文本节点的实现，然后又给出了一种使用createTreeWalker函数的方法来实现相同的功能。作者通过比较两种方法的执行时间，发现使用createTreeWalker函数的方法要快8到9倍。

解决方法是使用createTreeWalker函数来过滤出文本节点，并将它们添加到一个数组中返回。还有一点，如果想要排除script或style标签的内容，可以在createTreeWalker函数中传递一个过滤器作为第三个参数，来手动过滤文本节点。

文章的整体内容可以按照如下方式组织：

1. 问题的出现：作者想要找出HTML页面中的所有文本节点。

2. 解决方法1：使用递归的方式找出所有文本节点。

- 代码示例：function textNodesUnder(node) { ... }

- 作者发现该方法执行时间较长。

3. 解决方法2：使用createTreeWalker函数找出所有文本节点。

- 代码示例：function textNodesUnder(el) { ... }

- 作者发现该方法执行时间较短。

4. 比较两种方法的执行时间。

- 作者在Chrome浏览器下测试，发现使用createTreeWalker函数的方法要快8到9倍。

5. 排除script或style标签的内容。

- 作者提到可以在createTreeWalker函数中传递过滤器来手动过滤文本节点。

6. 其他相关链接和参考资源。

根据以上内容，可以整理成一篇文章。

0
0 Comments

问题的出现原因是作者担心递归解决方案可能会遇到堆栈限制问题。解决方法是通过使用循环和判断语句来遍历节点树，以便找到所有的文本节点。

代码中的函数deepText(node)通过递归的方式遍历节点树，将所有的文本节点存储在数组A中，并返回该数组。在函数中，首先判断节点是否存在，如果存在，就将节点的第一个子节点赋值给变量node。然后，通过while循环遍历节点的兄弟节点，如果该节点是文本节点，则将其添加到数组A中；如果该节点不是文本节点，则通过递归调用deepText函数来继续遍历该节点的子节点，并将返回的数组与数组A进行合并。最后，将节点的下一个兄弟节点赋值给变量node，继续下一轮循环，直到遍历完所有的节点。

还有一种更简洁的循环解决方案，使用for循环来遍历节点树。在这种解决方案中，首先将节点的第一个子节点赋值给变量node，然后通过判断语句来遍历节点的兄弟节点，直到遍历完所有的节点。

作者在文章中还提到了对递归解决方案可能会遇到堆栈限制问题的担忧。然而，根据作者在文章中提供的链接，这种情况是不太可能发生的。

，这篇文章讨论了在HTML页面中查找所有文本节点的问题，并提供了两种解决方案：递归和循环。通过使用递归或循环来遍历节点树，可以找到并存储所有的文本节点。作者还解释了对递归解决方案可能会遇到堆栈限制问题的担忧，并提供了一个链接来说明这种情况的不太可能性。

0