iOS 16.4以下版本Regex Lookbehind不兼容的正则改写求助

核心思路 #

由于旧版Safari不支持后行断言，我们换用**"匹配并跳过HTML标签/实体，仅捕获目标搜索词"**的思路：用非捕获组匹配标签和实体（这些内容直接保留），用捕获组锁定需要高亮的搜索词，最后在替换阶段只处理捕获到的内容。

修改后的代码实现 #

// 先转义搜索词中的正则特殊字符，避免匹配异常
const searchTerm = $search.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 构造兼容版正则：分支匹配标签/实体，或捕获搜索词
const regex = new RegExp(`(?:<[^>]+>|&[^;]+)|(${searchTerm})`, 'gi');

// 执行替换，实现高亮
const highlightedHtml = originalHtml.replace(regex, (match, capture) => {
  // 捕获组有内容时，包裹高亮标签
  if (capture) {
    return `<span class="highlight">${capture}</span>`;
  }
  // 无捕获内容则是标签/实体，直接返回原内容
  return match;
});

关键说明 #

1. 正则转义：对搜索词中的特殊字符（如.、*）做转义，防止这些字符干扰正则逻辑
2. 正则结构：
   • (?:<[^>]+>|&[^;]+)：非捕获组，匹配所有HTML标签（如<div>）或HTML实体（如 ），这些内容不会被修改
   • (${searchTerm})：捕获组，仅匹配需要高亮的目标搜索词
3. 替换逻辑：通过判断捕获组是否存在，区分需要高亮的内容和无需修改的HTML结构，确保页面标签不被破坏

此方案完全避开后行断言语法，兼容所有支持ES5的浏览器（包括iOS 16.4以下的Safari），同时精准跳过HTML标签和实体，不会出现误高亮情况。

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