正则零宽导致iOS端uni-app报错：连接服务器超时，点击重试

一个 H5 项目中使用安卓设备一切正常，用 iOS 就显示 连接服务器超时，点击屏幕重试。

排查了半天，原来是正则引起的。

可能会报以下错误：

Invalid regular expression: invalid group specifier name

[system] SyntaxError{}

Info Warn Error SyntaxError: Invalid regular expression: invalid group specifier name

原因：

iOS 不支持零宽断言，如果正则表达式中包含零宽断言 , 在安卓手机上正常 , 但是在 iOS 上就会报错。

常见零宽断言：?<= 、?<! 、?! 、?=

例如：只显示姓名开头第一个字（正则），格式：张**

//只显示姓名开头第一个字

data.replace(/(?<=.)./g, '*')

解决：

不使用零宽断言，可以使用截取&拼接字符串的方式，如果实现比较复杂的效果可以自己封装一个方法。

例如：我要截取银行卡后四位，前面加星号。

正则（断言）：

no.replace(/(?<=\d{0})\d+(?=\d{4})/, "****")

截取&拼接字符串：

"****" + no.slice(-4)

这样就可以兼容 iOS 端了。

扩展：正则零宽断言

正则位置匹配：

零宽：只匹配位置，在匹配过程中，不占用字符，所以被称为零宽。

先行：正则引擎在扫描字符的时候，从左往右扫描，匹配扫描指针未扫描过的字符，先于指针，故称先行。

后行：匹配指针已扫描过的字符，后于指针到达该字符，故称后行，即产生回溯。

正向：即匹配括号中的表达式。

负向：不匹配括号中的表达式。

es5 就支持了先行断言

es2018 才支持后行断言

零宽正向先行断言，又称正向向前查找（positive lookhead）

注意: .在正则里面代表匹配除换行符，回车符等少数空白字符之外的任何字符，匹配其时需要转义

(?=pattern)：某位置后面紧接着的字符序列要匹配 pattern

例：

`sinM.`.match(/sin(?=M\.)/g); // ["sin"] `M.sin`.match(/sin(?=M\.)/g); // null 复制代码

第一个 sin 会匹配，因为他后面有 pattern

零宽负向先行断言，又称负向向前查找（negative lookhead）

(?!pattern)：某位置后面紧接着的字符序列不能匹配 pattern

例：

`M.sin`.match(/sin(?!M\.)/g); // ["sin"] `sinM.`.match(/sin(?!M\.)/g); // null 复制代码

第一个 sin 会匹配，因为他后面没有 pattern

零宽正向后行断言，又称正向向后查找（positive lookbehind）

(?<=pattern)：某位置前面紧接着的字符序列要匹配 pattern

例：

'sinM.'.match(/(?<=M\.)sin/g); // null 'M.sin'.match(/(?<=M\.)sin/g); // ["sin"] 复制代码

第二个 sin 会匹配，因为它前面有 pattern

零宽负向后行断言，又称负向向后查找（negative lookbehind）

(?<!pattern)：某位置前面紧接着的字符序列不能匹配 pattern

例：

'sinM.'.match(/(?<!M\.)sin/g); // ["sin"] 'M.sin'.match(/(?<!M\.)sin/g); // null 复制代码

第一个 sin 会匹配，因为它前面没有 pattern

参考文献：

关于正则位置匹配（断言）的技巧

未经允许不得转载：前端资源网 - w3h5 » 正则零宽导致iOS端uni-app报错：连接服务器超时，点击重试