JS提取URL正则报Invalid regular expression invalid group错误

报错由正则兼容性问题导致：你写的正则中使用了(?<![\@\.])负向后行断言语法，该特性是ES2018才加入JavaScript标准的。你部署网站的运行环境（要么是用户端浏览器版本过低，要么是项目构建时将JS编译目标设为ES2018以下版本）不支持该语法，正则引擎无法识别这种特殊分组结构，因此抛出「Invalid group（无效分组）」错误。jsfiddle默认运行环境支持ES2018特性，所以测试时可以正常运行。

方案1：改写正则，移除后行断言兼容全环境 #

把需要后行断言实现的「匹配内容前不能是@或.」的逻辑，改成普通捕获组+结果过滤的写法，兼容所有JS版本：

// 改写后的正则，把后行断言换成了普通前缀捕获组
const regex = /\b(?:(?:https?\:\/\/|\b)(?:(?:\d{1,3}\.){3}\d{1,3}|(^|[^\@\.])(?:[^\s\/\?\#\@\.]+\.){1,2}[a-z]{2,3})(?:[\/\#\:\?][^\s\@]*|\b)(?![\@\.]))/gm;

使用时把捕获到的多余前缀字符裁掉即可，示例：

const testStr = "示例文本：访问google.com 或 http://192.168.1.1 ，不要匹配xxx@qq.com、aaa.bbb这类内容";
const urlList = [...testStr.matchAll(regex)].map(item => {
  // 第2个捕获组是误匹配的前缀字符，从最终结果中移除
  return item[0].slice(item[1].length);
});
// urlList 结果为 ["google.com", "http://192.168.1.1"]

方案2：调整项目构建配置，保留ES2018语法 #

如果你不需要兼容Chrome < 62、Firefox < 78、Safari < 11.1、IE全系列的旧浏览器，可以直接调整项目构建配置，让编译后的代码保留ES2018语法，原有正则无需修改即可运行：

• 使用Babel的项目：在@babel/preset-env配置中，将targets调整为支持ES2018的浏览器版本
• 使用TypeScript的项目：将tsconfig.json中的target字段设置为ES2018或更高版本

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