javascript - 如何仅获取文本节点的渲染文本？

Question

我正在创建一个小网络扩展，它根据文本修改网页。作为我的问题的一个例子，这里是一些代码，其中树遍历器抓取页面上的所有文本节点:

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  { acceptNode: () => {return NodeFilter.FILTER_ACCEPT;} },
  false
);

while(treeWalker.nextNode()) {
  let x = treeWalker.currentNode.data;
  //do something with x
}

不幸的是，x 将拥有节点中的所有文本，即使它没有显示在网页上。

我想要的是类似treeWalker.currentNode.innerText的东西，但是对于文本节点来说这是未定义的。有谁知道如何仅获取文本节点向用户显示的文本？

示例:如果网页具有包含以下 HTML 的节点:

<div>
  <script type="text/x-config">
    {
      "setObject": -1
    }
  </script>
    <span>Quiz</span>

与关联的 CSS:

script {
    display: none;
}

然后，相应文本节点的文本内容(减去额外的空格和换行符)将作为“{ "setObject": -1 } Quiz”返回。然而，呈现给用户的唯一内容是“测验”。给定相应的文本节点，如何仅获取渲染的文本？

Answer 1

我想我们有问题。

如果您使用新的浏览器，您应该能够使用innerText，但如果不是，则必须使用textContent。textContent 的问题是它获取所有元素的内容，包括 and ，并且 textContent 不知道样式，因此它将返回隐藏事件。

我想正确的方法是将过滤器替换为 NodeFilter.SHOW_ELEMENT 并获取 Element.innerHTML。

所以尝试一下:

var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: (node) => {  return NodeFilter.FILTER_ACCEPT;} },
false
);

while(treeWalker.nextNode()) {
    let x = treeWalker.currentNode.innerHTML;
    //do something with x
}