如何仅对HTML文本内容执行正则替换并保留原有HTML元素？

问题根源 #

你当前的代码直接给element.innerText赋值，这会完全销毁原有DOM结构——所有子元素（如<h1>、<p>）都会被转换成纯文本，仅用<br>标签替代块级元素的换行，因此后续修改innerHTML也无法恢复原有的标签结构。

正确实现方式 #

要实现「只修改文本内容、保留原有DOM元素」的需求，需要遍历DOM树中的文本节点，单独处理每个文本节点的内容，不破坏父元素结构。以下是两种可行的实现：

方法1：使用TreeWalker遍历文本节点 #

const body = document.querySelector('body');
// 创建TreeWalker，仅筛选文本节点
const textWalker = document.createTreeWalker(
  body,
  NodeFilter.SHOW_TEXT,
  null,
  false
);

let currentNode;
while (currentNode = textWalker.nextNode()) {
  const originalText = currentNode.nodeValue;
  // 匹配引号包裹的内容，替换为带高亮span的HTML字符串
  const processedText = originalText.replace(
    /["“”]([^"”“\n]+)["”“]/g,
    '"<span style=\\"color: red\\">$1</span>"'
  );

  if (processedText !== originalText) {
    // 用临时div解析HTML字符串为DOM节点
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = processedText;
    // 将解析后的节点插入原文本节点位置，再删除原节点
    while (tempContainer.firstChild) {
      currentNode.parentNode.insertBefore(tempContainer.firstChild, currentNode);
    }
    currentNode.parentNode.removeChild(currentNode);
  }
}

方法2：递归遍历DOM节点 #

function processTextInElement(element) {
  for (let i = 0; i < element.childNodes.length; i++) {
    const node = element.childNodes[i];
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const originalText = node.nodeValue;
      const processedText = originalText.replace(
        /["“”]([^"”“\n]+)["”“]/g,
        '"<span style=\\"color: red\\">$1</span>"'
      );

      if (processedText !== originalText) {
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = processedText;
        while (tempContainer.firstChild) {
          element.insertBefore(tempContainer.firstChild, node);
        }
        element.removeChild(node);
        i--; // 删除节点后调整索引，避免跳过后续节点
      }
    }
    // 递归处理子元素节点
    else if (node.nodeType === Node.ELEMENT_NODE) {
      processTextInElement(node);
    }
  }
}

// 启动处理
processTextInElement(document.querySelector('body'));

效果说明 #

执行上述代码后，原有的<h1>、<p>标签及其id属性会完整保留，仅引号包裹的文本内容会被<span style="color: red">标签包裹，完全符合你的期望输出。

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