在网页内容动态化场景中，我们常常需要把某些词语统一替换掉，比如将文档里的“旧版”改成“新版”。如果直接用字符串的 replace 方法对整个 HTML 进行处理，很容易把标签名、属性值里出现的相同字词也改掉，导致结构错乱。真正稳妥的办法是借助 DOM 树，只处理文本节点。
为什么不能简单用正则替换
不少初学者拿到一段包含 HTML 的字符串，第一反应就是写个正则表达式全局替换。这种做法在内容完全可控时似乎没问题，但一旦 HTML 结构变复杂，就会引出难以察觉的 bug。例如标签名或属性中恰好包含目标词，就会被误伤。
看下面这段 HTML 字符串：
<div class="old-version">这是旧版说明</div> <span data-info="old-version-tag">旧版标签</span>
如果使用正则 /旧版/g 替换成“新版”，文本没问题；但若目标词是“old-version”且用正则替换，则 class 和 data-info 里的 old-version 也会被改掉，浏览器解析后样式与逻辑全部失效。因此字符串层替换不适合带有完整标签结构的场景。
基于 DOM 的文本节点遍历方案
DOM 将 HTML 解析为一棵节点树，其中文本内容是独立的文本节点（nodeType 为 3）。只要我们遍历所有文本节点并修改其 nodeValue，就能精准替换，完全不影响元素标签及其属性。原生 API 中，NodeIterator 是最轻量的选择。
以下示例把页面 body 内所有文本节点中的“旧版”替换为“新版”：
// 创建文本节点迭代器，只筛选文本节点
var iterator = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
{
acceptNode: function(node) {
// 跳过 script 和 style 里的文本
var parent = node.parentElement;
if (parent && (parent.tagName === 'SCRIPT' || parent.tagName === 'STYLE')) {
return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;
}
},
false
);
// 遍历并替换
var current;
while ((current = iterator.nextNode())) {
if (current.nodeValue.indexOf('旧版') !== -1) {
current.nodeValue = current.nodeValue.replace(/旧版/g, '新版');
}
}这段代码首先用 createTreeWalker 拿到 body 下的所有文本节点，并在过滤器中排除了 script 与 style，避免改动代码内容。随后在循环中只修改 nodeValue，元素结构、属性、事件绑定均保持原样。
相比正则字符串替换，该方案逻辑清晰、安全性高。缺点是在极大型文档上，遍历全部文本节点会有一定性能开销，但通常远低于重新解析整段 HTML 字符串的代价。
使用 querySelector 与 childNodes 的递归写法
如果不想用 TreeWalker，也可以手写递归函数，检查每个子节点的类型。这种方式更直观，也方便在替换时插入自定义逻辑。
function replaceTextInElement(root, oldStr, newStr) {
// 遍历直接子节点
var children = root.childNodes;
for (var i = 0; i < children.length; i++) {
var node = children[i];
if (node.nodeType === 3) {
// 文本节点
if (node.nodeValue.indexOf(oldStr) !== -1) {
node.nodeValue = node.nodeValue.replace(new RegExp(oldStr, 'g'), newStr);
}
} else if (node.nodeType === 1) {
// 元素节点，递归处理
var tag = node.tagName.toLowerCase();
if (tag !== 'script' && tag !== 'style') {
replaceTextInElement(node, oldStr, newStr);
}
}
}
}
// 调用：替换整个文档里的旧版为新版
replaceTextInElement(document.body, '旧版', '新版');递归写法通过 childNodes 区分文本与元素，遇到元素节点继续向下，遇到文本节点执行替换。它的可读性好，方便加入白名单或黑名单标签判断。实际项目中，若需替换范围较小，可把 root 限定为某个容器，而非整个 body，从而提升效率。
无论采用 TreeWalker 还是递归，核心原则都是“只动文本节点、不碰标签字符串”。这样既能完成精准替换，又能让页面交互与样式毫发无损。
第三方库与框架中的做法
在 Vue、React 等框架里，通常不建议直接操作 DOM 文本。正确方式是在数据层把字符串改好，再由框架渲染。比如 React 中可将源数据 map 后返回新文本，结构由 JSX 控制，不存在破坏标签的风险。
如果必须在已有静态页上做替换，原生 DOM API 已足够。像 cheerio 这类服务端 HTML 操作库，也遵循类似的节点遍历模型，在 Node.js 环境做批量内容替换时非常可靠，不会像正则那样引发结构问题。