如何替换字符串文本并忽略HTML标签内匹配项（支持不区分大小写）

别用正则硬扫全字符串、也别走纯文本剥离后位置映射的路线，坑多到根本堵不住，最稳的实现是基于DOM解析做节点级处理，从根源上避开标签和文本混淆、位置偏移、结构破坏的问题。 #

核心实现步骤 #

1. 解析HTML为DOM树，按节点类型分流处理 #

• 浏览器环境直接用原生DOMParser接口把输入的HTML片段解析为独立的DOM文档，Node环境可以用jsdom这类DOM解析库实现等价能力，不需要自己写正则拆分标签。
• 从DOM根节点开始做深度优先遍历，只处理普通文本节点（nodeType=3），所有标签节点、注释节点直接跳过；额外加一层判断：如果当前文本节点的父节点是<a>、<b>、<i>、<span>这类你不希望插入链接的标签，直接跳过该节点不做处理，从根源上避免标签嵌套、匹配到标签包裹内容的问题。

这种处理方式天然不会碰到标签名、标签属性里的内容，比如<a href="#link">里href属性的link、<link>标签名里的link，根本不会进入匹配逻辑，完全不会出现误替换。

2. 单文本节点内做规则匹配 #

因为当前处理的是剥离了所有标签的纯文本内容，直接用正则就能实现所有匹配要求，完全没有干扰：

• 先对目标关键词做正则转义，处理关键词里可能存在的.、*、?这类正则特殊字符，避免匹配逻辑异常
• 整词匹配用单词边界符\b包裹关键词正则，即可实现“只匹配独立完整词组、不匹配包含目标词的长词”的要求，比如\bfox\b只会匹配独立的fox，不会匹配foxes里的fox
• 不区分大小写匹配给正则加i标志，全局匹配加g标志
  正则生成的参考代码如下：

function buildKeywordRegex(keyword) {
  // 转义正则特殊字符
  const escapedWord = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  // 整词匹配+不区分大小写+全局匹配
  return new RegExp(`\\b${escapedWord}\\b`, 'gi')
}

这种处理方式天然会过滤跨标签的非连续词组：比如你测试用例里的soft <i>pillows</i>，soft在i标签前的文本节点，pillows在i标签内部的文本节点，两个内容不在同一个文本节点里，根本不会被匹配成连续的"soft pillows"，刚好符合你的匹配规则。

3. 节点替换避免HTML结构破坏 #

在文本节点中匹配到目标关键词后，不要直接拼接HTML字符串替换，用DOM节点操作的方式拆分替换原文本节点：

1. 以匹配到的关键词为分界点，把原文本拆成「匹配前内容、匹配到的关键词、匹配后内容」三个部分
2. 匹配前内容生成新的普通文本节点
3. 匹配到的关键词生成新的<a>标签节点，把关键词作为a标签的文本内容，添加上你需要的链接属性
4. 匹配后内容生成新的普通文本节点，继续执行匹配逻辑检查是否还有剩余可替换的关键词
5. 用新生成的三个节点替换掉原来的旧文本节点
   整个过程是原生DOM级别的节点操作，不会修改原有任何标签的结构和属性，完全不会出现标签交叉闭合、在加粗/斜体标签内嵌套链接的非法结构。

测试用例适配说明 #

用你提供的测试文本跑上述逻辑，完全符合匹配要求：

• link：仅匹配a标签外普通文本中的第一处link，a标签内的link因为父节点是a标签被直接跳过
• public platform：不区分大小写匹配b标签外的"Public platform"，b标签内的同词组因为父节点是b标签被跳过
• soft pillows：仅匹配普通文本节点中连续出现的那一处，被i标签拆分的soft和pillows不在同一文本节点，不会被误匹配
• fox：通过\b单词边界仅匹配独立的fox，不会匹配foxes
• fruits：仅匹配span标签外普通文本中的fruits，span标签内的同内容因为父节点是span被跳过

方案优势 #

• 完全不需要做复杂的纯文本到原字符串的位置映射，DOM结构天然完成了标签和文本的拆分，没有位置偏移算错的风险
• 原有HTML结构100%保留，不会出现标签损坏、嵌套错误的问题
• 规则灵活可扩展，后续要加跳过的标签类型、调整匹配规则只需要修改对应判断逻辑即可

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