如何改造包含后行断言(lookbehind)的正则表达式使其适配Safari浏览器

解决方案 #

方案1：使用捕获组替代后行断言（全浏览器兼容） #

把原来的后行断言逻辑改为捕获前置的边界符，再通过捕获组的长度计算得到searchTerm的真实起始下标，完全不需要用到后行断言特性，兼容所有主流浏览器包括Safari：

// 可选：如果searchTerm包含正则特殊字符（. * + ? ^ $ / [] () {} | \等），先执行转义避免匹配异常
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}
const escapedSearch = escapeRegExp(searchTerm)

// 改造后的正则，捕获前置边界（开头或空白符）
const regexp = new RegExp(`(^|\\s)${escapedSearch}`, 'gi')
const matchIndices = [...string.matchAll(regexp)].map(match => {
  // 前置边界的长度就是match[1]的长度，加上原匹配下标就是searchTerm的真实起始位置
  return match.index + match[1].length
})

matchIndices.forEach(index => {
  // 原有业务逻辑无需修改
  ...
})

逻辑说明 #

原正则的匹配规则为「字符串开头的searchTerm」或者「前面带空白符的searchTerm」，改造后的正则把开头/空白符作为第一个捕获组单独匹配，计算下标时叠加捕获组的长度，即可得到和原逻辑完全一致的、不包含前置空白符的匹配下标，无兼容性问题。

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