排坑·IPhone&IOS中不兼容正则中的断言匹配
阅文时长 | | 1.14分钟 | 字数统计 | | 1834.4字符 |
主要内容 | | 1、问题切入 2、什么是断言匹配 3、断言匹配的替换方案 4、声明与参考资料 | ||
『排坑·IPhone&IOS中不兼容正则中的断言匹配』 | |||
编写人 | | SCscHero | 编写时间 | | 2020/12/7 AM12:14 |
文章类型 | | 单篇 | 完成度 | | 已完成 |
座右铭 | 每一个伟大的事业,都有一个微不足道的开始。 |
一、问题切入 完成度:100%
a) 问题发现
PC端谷歌、QQ、Edge浏览器正常运行,移动端安卓设备可以正常运行的正则。 Macbook没有测试 (没有Mac电脑) 。 在IPhone系设备,IOS系统中的Safari浏览器、QQ浏览器都出现报错。报错信息在JS中使用try..catch语句获取到:SyntaxError:Invalid regular expression:invalid group specifier name。
b) 问题分析&排查方向
报错分析:
报错翻译过来是"正则表达式无效:组说明符名称无效。",推测是正则中的分组问题,然后经查其他使用正则的接口都是正常的,但出错接口是因为含有断言匹配。于是乎方向似乎明确了,IPhone设备可能将断言匹配当做了普通分组,于是为了兼容IPhone设备,改用分组写法匹配数据,详见例子。
解决过程/排查方向/摸索过程(可跳过看下面解决方案):
【错误方向1】首先,由于在其他设备、系统中都可以正常运行。于是以为是CSS前缀问题,于是检查了postcss-loader、autoprefixer插件。正常无问题。
【错误方向2】然后,检查了下ES6语法是否转换了ES5,检查了babel配置,仍然没问题。
【错误方向3】接着,想直接在IPhone机调试,发现无法调试。于是寻找可调试方案。
需要使用Macbook电脑,由于没有硬件设备,于是寻找可替代方案。
使用windows系统模拟Safari网页。此种方法需要安装一大堆环境,由于担心安装过程中又出现一大堆坑,于是继续寻找可替代方案。
于是使用异常捕获,在出错接口中弹出。捕获了异常。
c) 解决方案
改写断言匹配的正则表达式内容,以其他正则表达式内容替代。详见例子。
二、什么是断言匹配 完成度:100%
a) 个人理解
断言匹配是什么?断言匹配是正则表达式中的一个概念。博主在Google了一下,没有官方的定义,但在中文中基本叫断言匹配。断言匹配大致分为四种。详见下文。
断言匹配作用/用途?是正则表达式的条件语句。断言匹配的原子组,不会被正常的分组。所以在匹配的时候,可以只匹配需要的部分。
b) 名词普及
(?!)零宽负向先行断言
(?=)零宽先行断言
(?<=)零宽后行断言
(?<!)零宽负向后行断言。
c) 通俗解释
?!后面不是什么
?=后面是什么
?<=前面是什么。
?<!前面不是什么
d) 详细示例
下面本人使用JS的正则表达式的三个小例子来做示例。
{ //案例:替换除了pre标签的其他标签为p标签。 let str = ` <h1>h1 label content</h1> <pre>pre label content</pre> <span>span label content</span> `; let reg = /<(?!pre)(.*?)>(?<content>[\s\S]+?)<\/\1>/g; let repReg = str.replace(reg, "$<content>"); console.log(repReg); } { //案例:将所有元前面数字统一加上.00; let str = ` 500,1000.00,1500 `; let reg = /(\d+)(.00)?/g; console.log(reg.exec(str)); //v,匹配值。args,详细数组。 let res = str.replace(reg, (v, ...args) => { console.log(args); args[1] = args[1] || ".00"; return args.splice(0, 2).join(""); }); console.log(res); } { //案例:匹配字母后面的数据 let str = "SCscHero123"; let reg = /(?<=SCscHero)\d+/i; console.log(str.match(reg)); } {//案例:匹配字符串中不能出现SC字母 let str = "SSSCscHero"; //即起始的后面,不能出现SC console.log(str.match(/^(?!.*SC.*).*$/)); }
三、断言匹配的替换方案 完成度:100%
断言匹配的替换方案还是挺多的,主要目的就是分析字符串,达到你的目的即可(基本是废话,手动滑稽)。下面用本人的一个例子讲一下怎么处理。
【要求】从下面的字符串中提取需要的数字。
【分析】只需要提取数字,前后有固定的规律,因此符合使用断言匹配的条件。同样,也可以使用分组匹配提取其中的内容。
{//使用断言匹配写法 let str = "SCscHero123SCscHero"; let reg = /(?<=SCscHero)\d+(?=SCscHero)/g; console.log(str.match(reg)[0]); {//使用分组替换写法 let str = "SCscHero123SCscHero"; let reg = /SCscHero(\d+)SCscHero/; console.log(str.match(reg)[1]); }
这只是个小例子哈,如果有其他问题解决不了的,请留言博客。让博主也想想办法,目前只能想到这个应用。