如何在保留JavaScript属性的同时替换HTML中的指定字符串

你目前的核心问题有两个：一是直接修改innerHTML会销毁原有元素并重建，导致绑定的事件监听器丢失；二是现有代码只处理了<body>内的内容，根本没修改<html>根标签的属性。要同时解决这两个问题，得拆分操作：

1. 单独修改HTML根标签的属性 #

不用动整个HTML结构，直接操作根元素的对应属性即可：

// 替换html标签lang属性里的目标字符串
document.documentElement.lang = document.documentElement.lang.replace(/the-language/g, 'x');

2. 安全替换页面文本内容（保留事件监听器） #

不能用innerHTML批量替换，得遍历DOM树，只修改文本节点——这样不会破坏原有元素结构，绑定的事件监听器自然会保留：

function replaceTextInNodes(targetStr, replacement) {
  // 递归遍历所有节点
  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      // 仅处理文本节点，替换目标内容
      node.textContent = node.textContent.replace(new RegExp(targetStr, 'g'), replacement);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 元素节点则遍历其子节点
      for (let child of node.childNodes) {
        traverse(child);
      }
    }
  }
  // 从body开始遍历，可根据需求调整范围
  traverse(document.body);
}

完整修改后的代码 #

把你原来的按钮点击事件逻辑替换成以下代码：

function x(e) {
  return document.querySelector(e);
}
x("textarea").value = document.documentElement.outerHTML;
x("button").addEventListener("click", function() {
  console.log("button pressed");
  
  // 1. 处理html根标签的lang属性
  document.documentElement.lang = document.documentElement.lang.replace(/the-language/g, 'x');
  // 2. 处理页面中的文本内容
  replaceTextInNodes('the-language', 'x');
  
  x("textarea").value = document.documentElement.outerHTML;
});

// 文本替换工具函数
function replaceTextInNodes(targetStr, replacement) {
  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(new RegExp(targetStr, 'g'), replacement);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      for (let child of node.childNodes) {
        traverse(child);
      }
    }
  }
  traverse(document.body);
}

这样操作后，按钮的事件监听器会完整保留，<html>根标签的属性也会被修改，页面内的文本替换也不会破坏原有元素结构。

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