更改页面中的所有文本节点

Question

我正在使用以下脚本将页面中的所有文本更改为没有空格的长文本"aquickbrownfoxjumpedoveralazyfrog"，这是为了测试文本是否在所有地方都正常中断。

但是当我运行通过将脚本粘贴到控制台中时，它以某种方式将此文本随机添加到不同的位置并且奇怪地填满了页面！知道我哪里做错了吗？

(function(el, string){
  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) n.nodeValue = string;
}(document.body, 'abigfoxjumpedoveralazyfrogmultipletimes'));

Answer 1

您是否希望 SHOW_TEXT 给您可见的文字？我的直觉是，您对 SHOW_TEXT 到 select 的期望与实际情况之间存在脱节。

不幸的是，关于此的 MDN 文档缺少具体示例。

这是一个堆栈溢出的答案，可以解释正在发生的事情：What Is A Text Node, Its Uses? //document.createTextNode()

似乎元素可能有多个子节点，它们是文本节点。我不确定您正在解析的 HTML 是什么样子，但您可能有多个文本节点都设置为相同的字符串。

Answer 2

请记住，文本节点可能只是白色 space，或者换句话说，白色 space 也是文本节点。这些节点将由您的脚本填充。这将导致您的替换文本出现在许多意想不到的地方。

<div>**THERE IS AN EMPTY TEXT NODE HERE**
  <span>Hi bob</span>**THERE IS AN EMPTY TEXT NODE HERE**
</div>

你的结果将是

<div>abigfoxjumpedoveralazyfrogmultipletimes
  <span>abigfoxjumpedoveralazyfrogmultipletimes</span>abigfoxjumpedoveralazyfrogmultipletimes
</div>

为避免这种情况，请测试文本节点中是否存在任何非白色-space字符：

while (n=walk.nextNode()) if (/\S/.test(n.nodeValue)) n.nodeValue = string;
                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^

更改页面中的所有文本节点

Change all textNodes in a page

javascript

textnode