JS正则后置断言在Firefox与Safari中失效，求兼容修改方案

首先，你的问题有两个核心点：一是原正则用了ES2018引入的正向lookbehind断言（(?<=...)），而Firefox和Safari在较旧版本中不支持这个特性；二是原正则的匹配逻辑其实没法实现你想要的split结果——原正则匹配的是<tag>和</tag>之间的内容（比如fox、dog），用它split会把这些内容作为分隔符去掉，根本得不到你期望的保留整个标签块的数组。

正确的兼容方案 #

我们可以利用JavaScript中split方法的一个特性：如果正则包含捕获组，那么捕获到的内容会被包含在split的结果数组中。基于这个特性，我们直接匹配整个<tag>...</tag>块，就能实现需求，而且这个正则完全兼容所有现代浏览器（包括Firefox、Safari）。

修改后的正则：

const regex = /(<tag>.*?<\/tag>)/;

测试验证 #

用你的输入字符串测试：

const input = "The quick brown <tag>fox</tag> jumps over the lazy <tag>dog</tag>";
const result = input.split(regex);
console.log(result);

输出结果正好符合你的期望：

["The quick brown ", "<tag>fox</tag>", " jumps over the lazy ", "<tag>dog</tag>"]

为什么这个方案可行？ #

• 正则(<tag>.*?<\/tag>)中的捕获组会完整匹配每个<tag>...</tag>块；
• split方法遇到这个匹配块时，会把块之前的普通文本作为数组元素，然后把捕获到的标签块作为下一个元素，以此类推；
• 没有使用任何ES2018+的新特性，完美兼容Chrome、Firefox、Safari等所有现代浏览器。

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