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

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

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

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

为了避免这种情况，请测试文本节点中是否存在任何非空白字符:

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