如何遍历包含纯文本的span子节点并替换目标文本？

我需要处理一个混合了标签和纯文本的<span>元素：替换其中指定的纯文本内容，但保留原有标签结构。尝试用span.children遍历子项时，发现它只会返回元素节点，完全忽略了纯文本节点，请问如何遍历包括纯文本在内的所有子节点？

示例代码 #

JavaScript #

console.log(document.querySelector('span').children)

HTML #

<span>
  <p>Ignore text</p>
  target text 1
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196" />
  target text 2
</span>

期望效果 #

<!-- From -->
<span>
    <p>Ignore text</p>
    target text 1
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
    target text 2
</span>

<!-- To -->
<span>
    <p>Ignore text</p>
    new text 1
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
    new text 2
</span>

解决方法 #

使用childNodes属性替代children，它会返回元素的所有子节点，包括文本节点、元素节点、注释节点等。

具体步骤：

1. 遍历childNodes中的每个节点
2. 通过nodeType === 3判断是否为文本节点
3. 过滤掉仅含空格、换行的空白文本节点，避免误处理
4. 对目标文本节点执行替换操作，跳过不需要处理的元素（比如示例中的<p>）

实现代码 #

const span = document.querySelector('span');
// 遍历所有子节点
span.childNodes.forEach(node => {
  // 只处理非空白的文本节点
  if (node.nodeType === 3 && node.textContent.trim() !== '') {
    // 替换目标文本，如需全局替换可改用正则：/target text/g
    node.textContent = node.textContent.replace('target text', 'new text');
  }
});

内容的提问来源于stack exchange，提问作者Viewed