如何使用replace()仅修改页面纯文本而非HTML属性？

你的问题出在直接修改document.body.innerHTML——这种方式会把HTML结构里的属性文本（比如图片链接、标签属性）和页面显示的纯文本一起替换。要只处理纯文本，需要遍历DOM树中的文本节点，仅对这些节点的内容执行替换操作。

修改后的代码如下：

const replaceString = function (condition, target, replacement) {
    // 提前检查页面是否包含指定关键词，无则终止操作
    if (!document.body.textContent.includes(condition)) return false;

    // 构建全局不区分大小写的正则表达式
    const regTarget = new RegExp(target, 'gi');

    // 递归遍历DOM树，仅处理文本节点
    function traverseTextNodes(node) {
        // 判定当前节点为纯文本节点时执行替换
        if (node.nodeType === Node.TEXT_NODE) {
            if (regTarget.test(node.textContent)) {
                node.textContent = node.textContent.replace(regTarget, replacement);
            }
        } else {
            // 跳过脚本、样式等无需处理的标签
            const skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'];
            if (!skipTags.includes(node.tagName)) {
                // 递归处理所有子节点
                for (const child of node.childNodes) {
                    traverseTextNodes(child);
                }
            }
        }
    }

    // 从body节点开始遍历整个页面的文本节点
    traverseTextNodes(document.body);
    return true;
};

// 调用示例
replaceString('overflow', 'Foo', 'Bar');

关键改进点说明 #

• 只操作文本节点：通过node.nodeType === Node.TEXT_NODE筛选出纯文本节点，仅修改这些节点的textContent，完全不会触及HTML属性内容
• 跳过特殊标签：忽略script、style等标签，避免破坏页面的脚本逻辑和样式定义
• 递归遍历全DOM：确保嵌套在任何元素内的文本（比如维基百科的段落、列表项）都能被处理
• 避免无意义操作：提前检查页面是否包含目标关键词，且仅在文本节点包含目标字符串时才执行替换，提升效率
• 保留原有事件绑定：相比直接替换innerHTML，这种方式不会重新渲染元素，页面原有的事件监听不会丢失

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