如何用JavaScript替换HTML中的特定单词'morr'且不修改原HTML？

没问题，这就给你一个可行的方案——我们可以通过遍历页面中的文本节点来实现替换，完全不需要修改原HTML代码，也不用添加任何额外的标签或属性。

思路说明 #

直接用innerHTML替换虽然简单，但可能会破坏元素结构（比如丢失事件绑定），还容易误改标签内的内容。更稳妥的方式是只针对纯文本节点操作，跳过所有元素节点，既能精准替换目标文本，又不会影响页面的其他功能。

代码实现 #

function replaceTextInNodes(node, searchStr, replaceStr) {
  // 跳过脚本、样式等不需要处理的元素节点
  if (node.nodeType === Node.ELEMENT_NODE) {
    const skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT'];
    if (skipTags.includes(node.tagName)) return;
    
    // 递归遍历所有子节点
    for (const child of node.childNodes) {
      replaceTextInNodes(child, searchStr, replaceStr);
    }
    return;
  }

  // 处理文本节点，执行替换
  if (node.nodeType === Node.TEXT_NODE) {
    // 正则实现全局+不区分大小写替换，按需调整标志
    const regex = new RegExp(searchStr, 'gi');
    node.textContent = node.textContent.replace(regex, replaceStr);
  }
}

// 调用函数：把页面中所有的'morr'替换成你想要的内容（示例替换为'MORR'）
replaceTextInNodes(document.body, 'morr', 'MORR');

细节调整 #

• 如果需要严格区分大小写（只替换小写的morr，不处理Morr），去掉正则的i标志即可，改成new RegExp(searchStr, 'g')
• 若只想替换特定区域的内容（比如只处理<p>标签），可以把document.body换成document.querySelector('p')或其他精准选择器
• 如果页面有动态加载的内容，记得在内容加载完成后再调用这个函数，确保新内容也能被处理

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