如何替换HTML中无内容标签

哈喽！今天心血来潮给大家带来了《如何替换 HTML 中未包裹文本内容》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

包裹的文本内容 " />

本文介绍如何遍历 DOM 中的纯文本节点（Text Nodes），仅对未被 `` 等标签包裹的原始文本中的目标字符串（如 `TARGET`）进行安全替换，并将其包装为带指定 class 的 ``，避免重复处理已标记的内容。

在实际前端开发中，常需对页面中特定关键词做高亮或语义化标记（例如添加 class="target-class"），但必须谨慎避开已被 HTML 标签包裹的内容——否则会导致嵌套错误、重复包装或破坏原有结构。核心难点在于：element.children 仅返回元素节点（Element Nodes），而忽略纯文本节点（Text Nodes）；若直接操作 innerHTML，又极易污染已有 HTML 结构（如误改 contains TARGET 中的 TARGET）。

正确解法是使用 element.childNodes —— 它包含所有子节点类型（元素、文本、注释等），再通过 node.nodeType === Node.TEXT_NODE 精准筛选出纯文本片段。随后利用 document.createRange().createContextualFragment() 安全解析并替换文本中的匹配项，最后用 node.replaceWith(...) 原位更新。

以下为可直接运行的完整示例：

function replaceTargetInTextNodes(container: HTMLElement, target = 'TARGET', className = 'target-class') {
  const reg = new RegExp(`\\b${target}\\b`, 'g'); // 使用 \b 确保单词边界匹配
  for (const node of container.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
      const replacedHtml = node.textContent.replace(reg, `<span class="${className}">$&</span>`);
      if (replacedHtml !== node.textContent) {
        const fragment = document.createRange().createContextualFragment(replacedHtml);
        node.replaceWith(fragment);
      }
    }
  }
}

// 调用示例
const container = document.querySelector('#a') as HTMLElement;
replaceTargetInTextNodes(container);

✅ 关键优势说明：

• ✅ 不干扰已有 HTML：只处理 TEXT_NODE，跳过 、
  等元素节点，天然规避对 contains TARGET 的误操作；
• ✅ 保留原始结构：使用 createContextualFragment 解析 HTML 片段，确保生成的 是合法 DOM 节点，而非字符串拼接；
• ✅ 精准匹配：正则中加入 \b 边界符，防止 TARGETED 或 INTARGET 被误匹配；
• ✅ 性能友好：仅遍历一级 childNodes，无需递归或深度 DOM 查询。

⚠️ 注意事项：

• 若容器内存在