排坑·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]);
    }

这只是个小例子哈，如果有其他问题解决不了的，请留言博客。让博主也想想办法，目前只能想到这个应用。

四、声明与参考资料   完成度：100%

原创博文，未经许可请勿转载。

如有帮助，欢迎点赞、收藏、关注。如有问题，请评论留言！如需与博主联系的，直接博客私信SCscHero即可。