innerHTML字符串replace时如何避免影响childNodes中的HTML标签

DevOps 小满

2026-8-29

问题描述

计划给文档内p标签的每个单词包裹span元素，现有代码首次执行替换可正常生效，但后续替换会出现内容重叠问题，会彻底破坏p标签原有的HTML结构，运行时会出现标签嵌套错乱、样式异常的问题。
当前不确定实现思路是否存在缺陷，或是需要补充特殊处理逻辑，实现仅替换标签之间的文本内容、不影响HTML标签本身的效果。
最终开发目标是完成一款Chrome扩展，实现页面任意单词前1/2字符高亮的效果，帮助阅读障碍人群更快浏览网页内容。

原有问题代码

const runBionic = (node: ChildNode, paragraph: HTMLElement):HTMLElement => {
if (node.textContent === null) return paragraph;
const originalWords:string[] = node.textContent.split(" ");
const filteredWords: string[] = originalWords.filter(word => word!=="" && word !== "\n");
console.log("Filtered words: ", filteredWords);
//replace each word with a span element
filteredWords.forEach(word => {
    const modifiedWord = `<span style='font-weight: bold;'>${word}</span>`;
    console.log("REPLACING ", word, "WITH ", modifiedWord);
    paragraph.innerHTML = paragraph.innerHTML.replaceAll(word,modifiedWord);
});
return paragraph;};

问题原因

原有实现存在两个核心缺陷，直接导致结构破坏：

直接对innerHTML做全局字符串替换，会无差别匹配所有位置的目标字符串，包括HTML标签属性值、已经插入的span标签内的文本。多次执行时会出现span多层嵌套、标签属性被篡改的问题，彻底打乱DOM结构。
直接读取节点的textContent拆分单词，会把所有子节点的文本内容混为一体，无法区分哪些是需要处理的页面文本、哪些是HTML标签的组成部分，替换时必然会误伤标签结构。

正确实现方案

核心原则是 只操作纯文本节点，绝对不要直接对innerHTML做字符串替换，实现步骤如下：

遍历目标容器内的所有节点，仅筛选出纯文本节点（nodeType=3），跳过所有元素节点，完全不触碰HTML标签本身
对每个纯文本节点单独拆分单词，生成包裹了span标签的文档片段
用生成的文档片段替换原纯文本节点，同时给已处理的节点加标记，避免重复执行时重复处理

修正后的参考代码：

/**
 * 处理单个纯文本节点，给单词包裹span标签
 */
const processTextNode = (textNode: Text) => {
  const parentNode = textNode.parentNode;
  if (!parentNode) return;

  const content = textNode.textContent || '';
  // 拆分时保留空白分隔符，避免破坏原排版间距
  const segments = content.split(/(\s+)/);
  const fragment = document.createDocumentFragment();

  segments.forEach(seg => {
    // 空白内容直接保留为纯文本节点，不做处理
    if (/^\s*$/.test(seg)) {
      fragment.appendChild(document.createTextNode(seg));
      return;
    }
    // 创建单词包裹标签，此处已实现前1/2字符高亮逻辑，可自行调整规则
    const wordSpan = document.createElement('span');
    wordSpan.classList.add('bionic-read-word');
    const splitIndex = Math.ceil(seg.length / 2);
    wordSpan.innerHTML = `<strong>${seg.slice(0, splitIndex)}</strong>${seg.slice(splitIndex)}`;
    fragment.appendChild(wordSpan);
  });

  // 替换原文本节点
  parentNode.replaceChild(fragment, textNode);
};

const runBionic = (paragraph: HTMLElement) => {
  // 创建DOM树遍历器，仅抓取目标段落内的纯文本节点
  const treeWalker = document.createTreeWalker(
    paragraph,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: (node) => {
        const parent = node.parentNode as HTMLElement | null;
        // 跳过已经处理过的单词节点内的文本，避免重复嵌套
        if (parent?.classList.contains('bionic-read-word')) {
          return NodeFilter.FILTER_REJECT;
        }
        // 跳过空文本节点
        return node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      }
    }
  );

  // 收集所有待处理的文本节点（遍历过程中操作DOM会导致遍历器失效，所以先收集再处理）
  const waitProcessNodes: Text[] = [];
  let currentNode: Node | null;
  while (currentNode = treeWalker.nextNode()) {
    waitProcessNodes.push(currentNode as Text);
  }

  // 批量处理所有文本节点
  waitProcessNodes.forEach(node => processTextNode(node));
  return paragraph;
};

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