使用TreeWalker检索非Javascript文本节点

Using a TreeWalker to retrieve non-Javascript text nodes

本文关键字:文本 节点 Javascript TreeWalker 检索 使用      更新时间:2023-09-26

这个问题教我如何获取文档中的所有TextNodes,同时也教我获取Javascript文本。过滤掉所有属于Javascript代码的节点的最佳方法是什么?

<script>标记中的文本只有一个共同点:它们的父元素是<script>元素。

if (node.parentNode.nodeName !== 'SCRIPT')

另一种方法是使用过滤器:

var rejectScriptTextFilter = {
  acceptNode: function(node) {
    if (node.parentNode.nodeName !== 'SCRIPT') {
      return NodeFilter.FILTER_ACCEPT;
    }
  }
};
var walker = document.createTreeWalker(
  document.body, 
  NodeFilter.SHOW_TEXT, 
  rejectScriptTextFilter,
  false
);
var node;
var textNodes = [];
while(node = walker.nextNode()) {
  textNodes.push(node.nodeValue);
}
console.log(textNodes);
<script> var str = "script here"; </script>
<p> text here </p>

您可以克隆原始document,在克隆的document中删除<script>元素,然后迭代克隆的document 的剩余节点