如何用Vanilla JS替换文本内容而不修改标签的class、id、href属性？

方案1：递归遍历文本节点（最稳妥） #

直接针对DOM里的纯文本节点下手，跳过元素的属性部分，只改文字内容：

function replaceTextOnly(searchStr, replaceStr) {
  function traverseNode(node) {
    // 只处理纯文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(new RegExp(searchStr, 'g'), replaceStr);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 遍历所有子节点，不碰当前元素的属性
      Array.from(node.childNodes).forEach(traverseNode);
    }
  }
  // 从body开始遍历，也可以指定某个具体元素
  traverseNode(document.body);
}

// 调用示例
replaceTextOnly('foo', 'Foo');

这个方法递归扫遍所有节点，只对纯文本内容做替换，完全不会碰href、class这些标签属性，从根源避免误改问题。

方案2：用TreeWalker简化遍历 #

用浏览器原生的TreeWalker API直接筛选出所有文本节点，代码更简洁：

const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT, // 只找文本节点
  null,
  false
);

let textNode;
while (textNode = walker.nextNode()) {
  textNode.textContent = textNode.textContent.replace(/foo/g, 'Foo');
}

TreeWalker会自动跳过元素节点，只返回纯文本节点，直接修改这些节点的textContent，同样不会影响任何标签属性。

为啥innerHTML不能用？ #

innerHTML的逻辑是把元素的所有内容（包括子元素的标签、属性）转成字符串，替换后再重新解析成DOM。这不仅会误改属性，还可能丢失元素上绑定的事件、自定义数据等动态内容，纯文本替换绝对不能用它。

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