使用 Javascript TreeWalker 按 class 名称过滤以更改文本

Question

在讨论之后，我想了解如何使用 TreeWalker 更改按 class 名称过滤的文本节点上的文本。

我只想用 "x" 替换 <p class="french"> 上的所有数字。

有一个解决方案，但最后的jQuery对我来说不实用。我想了解为什么我的以下解决方案不起作用。

myfilter = function(node){
  if (node.className=="french")
  return NodeFilter.FILTER_ACCEPT
  else
  return NodeFilter.FILTER_SKIP;
}

var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, myfilter, false);

 while (walker.nextNode()) {
    walker.currentNode.nodeValue.replace(/(\d)/gu, 'x');   
 }

<body>
<p>890008900089000</p>
<p class="french">890008900089000</p>
</body>

Answer 1

您的代码

遍历所有文本节点（NodeFilter.SHOW_TEXT）
其中 className=="french" 和
用 "x"

有几个问题。

文本节点没有class。你必须测试他们的父节点class.
字符串是不可变的，您不使用替换的结果。
您实际上想用 "x" 替换所有数字，而不是所有数字。 (?)

所以把node.className改成node.parentNode.className，\d改成\d+，把String#replace的结果赋值给walker.currentNode.nodeValue：

myfilter = function(node){
  if (node.parentNode.className=="french")
  return NodeFilter.FILTER_ACCEPT
  else
  return NodeFilter.FILTER_SKIP;
}

var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, myfilter, false);

 while (walker.nextNode()) {
    walker.currentNode.nodeValue = walker.currentNode.nodeValue.replace(/\d+/g, 'x');   
 }

使用 Javascript TreeWalker 按 class 名称过滤以更改文本

Filter by class names for changing text, using Javascript TreeWalker

javascript

textnode