chrome49 低版本chrome 正则表达式不兼容 报错Invalid regular expression:invalid group

一、问题描述

在Vue 开发项目中，客户使用了比较低版本的chrome浏览器，部署到现场之后，访问页面报错，报错内容如下图

二、问题原因

看到报错的地方是正则表达式非法，但是这个正则表达式是经过校验的，而且研发环境没有这样的报错，所以这里提示非法，大概率是生产环境下，不能识别这样的正则表达式，推测问题是浏览器的兼容性造成的。

2.0 原来是零宽断言

仔细观察可以发现表达式中使用了正则表达式的【零宽断言】——在正则表达式中比较复杂的语法，下面简单解释一下什么是【零宽断言】。

2.1 零宽断言使用场景

当使用正则表达式搜索内容时，如果需要捕获的内容前后必须是特定内容，但又不捕获这些特定内容的时候，这个时候就可以使用零宽断言。

2.2 零宽断言基本概念

1. 断就是截断进行判断，只校验字符串的某部分。
2. 正则表达式中常用的断言元字符为：^和$，而零宽断言就是用其他正则表达式定义的功能类似的断言。
3. 零宽断言是一种零宽度的匹配，它匹配到的内容不会保存到匹配结果中去，最终匹配结果只是一个位置。

具体可以看这篇博文，说的比较详细: https://blog.csdn.net/yeshang_lady/article/details/121756563.

三、解决方案

知道了问题的原因之后，只要修改正则表达式就可，比如上面报错的表达式为

// 校验手机号
/^(?<!\d)(1[3|4|5|6|7|8|9][0-9]{9})(?!\d)/

修改为如下普通正则

// 校验手机号
/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|16[0-9]|17[0-9]|19[0-9])\d{8}$/i

打包到生产环境不再报错，问题解决~~~~