使用innerHTML与replaceAll时误替换HTML标签内字符的问题求助

你的代码通过直接替换字符串生成HTML的方式，会把已插入的<span>标签属性里的字符（比如class="highlight"中的e和a）当成文本内容替换，直接导致DOM结构崩溃。正确的思路是操作DOM文本节点，只在纯文本内容中做匹配替换，完全避开HTML标签的结构。

解决方案代码 #

HTML #

<p>Lorem ipsum dolor sit amet</p>

CSS #

.highlight {
  background-color: red;
}

JavaScript #

const strings = ['e', 'a'];
const pElement = document.querySelector('p');

function highlightStrings(element, targets) {
  // 倒序遍历子节点，避免DOM修改打乱索引顺序
  Array.from(element.childNodes).reverse().forEach(node => {
    // 跳过非文本节点，以及已被高亮包裹的节点（防止重复处理）
    if (node.nodeType !== Node.TEXT_NODE || node.parentElement?.classList.contains('highlight')) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // 递归处理元素节点的子节点
        highlightStrings(node, targets);
      }
      return;
    }

    const text = node.textContent;
    // 生成匹配所有目标字符串的正则，全局匹配（可去掉i标志区分大小写）
    const regex = new RegExp(`(${targets.join('|')})`, 'gi');
    let match;
    let lastIndex = 0;

    // 拆分文本节点，插入高亮标签
    while ((match = regex.exec(text)) !== null) {
      const matchText = match[0];
      const matchIndex = match.index;

      // 插入匹配前的文本（如果有内容）
      if (matchIndex > lastIndex) {
        node.before(document.createTextNode(text.slice(lastIndex, matchIndex)));
      }

      // 创建并插入高亮span
      const highlightSpan = document.createElement('span');
      highlightSpan.classList.add('highlight');
      highlightSpan.textContent = matchText;
      node.before(highlightSpan);

      lastIndex = matchIndex + matchText.length;
    }

    // 插入剩余的文本（如果有）
    if (lastIndex < text.length) {
      node.before(document.createTextNode(text.slice(lastIndex)));
    }

    // 删除原文本节点
    node.remove();
  });
}

highlightStrings(pElement, strings);

关键逻辑说明 #

1. 递归遍历DOM节点：只处理纯文本节点，对元素节点则递归深入其子节点，确保所有文本内容都被覆盖。
2. 避开已高亮节点：跳过highlight类标签的子节点，防止重复高亮同一文本。
3. 文本节点拆分：将原文本节点拆分为「匹配前文本」「高亮span」「匹配后文本」三部分，完全不触碰原有HTML标签结构。
4. 倒序遍历：修改DOM会改变节点索引，倒序遍历避免遗漏或重复处理节点。

运行后，目标文本会被正确包裹在红色背景的span中，HTML结构不会被破坏。

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