ReactJS字符串搜索排除HTML标签：正则漏匹配最后闭合标签后内容

AI 小北

2026-9-25

问题分析

你当前使用的正则${keyword}(?=[^>]*<)无法匹配末尾内容，核心问题出在正向肯定预查(?=[^>]*<)的规则限制：
该预查要求匹配到的关键词之后，必须出现<符号，而字符串最后一个</span>之后的内容不存在后续的<，永远无法命中预查条件，因此无法被检索到。

修正方案

我们需要调整预查逻辑，覆盖两种合法匹配场景：

场景1：关键词后存在<，且到<之前没有出现>（保证关键词不在标签内部，不会修改原始span标签）
场景2：关键词后直到字符串结束都没有出现<（匹配字符串末尾无后续标签的内容）

同时需要先对用户输入的关键词做正则特殊字符转义，避免关键词包含.、*、+等特殊字符时触发正则语法错误。

完整实现代码

// 正则特殊字符转义函数
function escapeRegExp(keyword) {
  return keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

const escapedKeyword = escapeRegExp(keyword)
// 修正后的匹配规则
const regexStr = `${escapedKeyword}(?=(?:[^>]*<)|(?:[^<]*$))`
const highlightRegex = new RegExp(regexStr, 'gi')

// 高亮替换示例
const highlightedContent = originalStr.replace(highlightRegex, match => {
  return `<span style="background-color: #6d7fcc; color: #fff">${match}</span>`
})

该方案同时满足你的所有需求：