Question

我使用以下脚本将页面中的所有文本更改为不带空格的长文本＆＃34; aquickbrownfoxjumpedoveralazyfrog＆＃34;，这是为了测试文本是否在所有位置正常打破。

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

(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;
                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^

Answer 2

您是否希望SHOW_TEXT能够为您提供可见的文字？我的直觉是，您希望SHOW_TEXT如何选择以及如何选择之间存在脱节。

不幸的是，关于这方面的MDN文档缺乏具体的例子。

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

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

更改页面中的所有textNodes

2 个答案: