Question

我正在创建一个webextension，根据文本修改网页。作为我的问题的一个例子，这里有一些代码，它有一个树型助手抓取页面上的所有文本节点：

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

然后将相应文本节点的文本内容（减去额外的空格和换行符）返回为＆＃34; {＆＃34; setObject＆＃34;：-1} Quiz＆＃34;。但是，向用户呈现的唯一内容是＆＃34; Quiz＆＃34;。给定相应的文本节点，如何仅获取渲染文本？

Answer 1

我想我们遇到了问题。

如果您使用的是新浏览器，则应该可以使用innerText，但如果您不是，则必须使用textContent。 textContent的问题在于它获取所有元素的内容，包括和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
}

如何只获取文本节点的渲染文本？

1 个答案: