JavaScript中replaceAll()无法替换HTML页面的</em>问题

问题根源 #

你分两次修改document.body.innerHTML导致了替换失败：

• 第一次赋值后，浏览器会自动解析新的HTML内容，把所有HTML实体（比如<、>）转换成实际的<、>字符。
• 这意味着第一次替换完成后，原来的</em>已经变成了文本</em>，第二次调用replaceAll("</em>", "_")时，找不到匹配的字符串，自然无法替换。

修复方案 #

把两次替换合并成一次操作，在字符串层面完成所有替换后再赋值给innerHTML，避免中间触发DOM解析：

function rep() 
{
    document.body.innerHTML = document.body.innerHTML
        .replaceAll("<em>", "_")
        .replaceAll("</em>", "_");
}
window.onload = rep;

更安全的替代方案 #

直接修改document.body.innerHTML会导致整个页面DOM重新渲染，页面上的事件监听会丢失。如果你的页面有交互元素，推荐用遍历文本节点的方式精准替换：

function replaceEmText(node) {
    if (node.nodeType === Node.TEXT_NODE) {
        node.textContent = node.textContent
            .replace(/<em>/g, "_")
            .replace(/<\/em>/g, "_");
    } else {
        for (const child of node.childNodes) {
            replaceEmText(child);
        }
    }
}

window.onload = function() {
    replaceEmText(document.body);
};

这个方法只修改文本内容，不会破坏原有DOM结构和事件绑定，更稳定。

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