排坑·IPhone&IOS中不兼容正则中的断言匹配

   排坑·IPhone&IOS中不兼容正则中的断言匹配            

阅文时长 |  1.14分钟 字数统计 |  1834.4字符
主要内容 |  一、问题切入 二、什么是断言匹配 三、断言匹配的替换方案 四、声明与参考资料
『排坑·IPhone&IOS中不兼容正则中的断言匹配』
编写人 | SCscHero 编写时间 | 2020/12/7 AM12:14
文章类型 |  单篇 完成度 | 已完成
座右铭 每个伟大的事业,都有一个微不足道的开始。
1、问题切入   完成度:100%

a) 问题发现

PC端谷歌、QQ、Edge浏览器正常运行,移动端安卓设备能够正常运行的正则。 Macbook没有测试 (没有Mac电脑)  。  在IPhone系设备,IOS系统中的Safari浏览器、QQ浏览器都出现报错。报错信息在JS中使用try..catch语句获取到:SyntaxError:Invalid regular expression:invalid group specifier name。css

b) 问题分析&排查方向

报错分析:
报错翻译过来是"正则表达式无效:组说明符名称无效。",推测是正则中的分组问题,而后经查其余使用正则的接口都是正常的,但出错接口是由于含有断言匹配。因而乎方向彷佛明确了,IPhone设备可能将断言匹配当作了普通分组,因而为了兼容IPhone设备,改用分组写法匹配数据,详见例子。正则表达式

解决过程/排查方向/摸索过程(可跳过看下面解决方案):
【错误方向1】首先,因为在其余设备、系统中均可以正常运行。因而觉得是CSS前缀问题,因而检查了postcss-loader、autoprefixer插件。正常无问题。
【错误方向2】而后,检查了下ES6语法是否转换了ES5,检查了babel配置,仍然没问题。
【错误方向3】接着,想直接在IPhone机调试,发现没法调试。因而寻找可调试方案。express

  • 须要使用Macbook电脑,因为没有硬件设备,因而寻找可替代方案。
  • 使用windows系统模拟Safari网页。此种方法须要安装一大堆环境,因为担忧安装过程当中又出现一大堆坑,因而继续寻找可替代方案。
  • 因而使用异常捕获,在出错接口中弹出。捕获了异常。

c) 解决方案

改写断言匹配的正则表达式内容,以其余正则表达式内容替代。详见例子。windows

2、什么是断言匹配   完成度:100%

a) 我的理解

断言匹配是什么?断言匹配是正则表达式中的一个概念。博主在Google了一下,没有官方的定义,但在中文中基本叫断言匹配。断言匹配大体分为四种。详见下文。
断言匹配做用/用途?是正则表达式的条件语句。断言匹配的原子组,不会被正常的分组。因此在匹配的时候,能够只匹配须要的部分。数组

b) 名词普及

  • (?!)零宽负向先行断言
  • (?=)零宽先行断言
  • (?<=)零宽后行断言
  • (?<!)零宽负向后行断言。

c) 通俗解释

  • ?!后面不是什么
  • ?=后面是什么
  • ?<=前面是什么。
  • ?<!前面不是什么

d) 详细示例

下面本人使用JS的正则表达式的三个小例子来作示例。浏览器


  {
        //案例:替换除了pre标签的其余标签为p标签。
        let str = `h1 label contentpre label contentspan label content`;
        let reg = /(?[\s\S]+?)/g;
        let repReg = str.replace(reg, "$");
        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.*).*$/));
}
3、断言匹配的替换方案   完成度:100%

断言匹配的替换方案仍是挺多的,主要目的就是分析字符串,达到你的目的便可(基本是废话,手动滑稽)。下面用本人的一个例子讲一下怎么处理。babel


【要求】从下面的字符串中提取须要的数字。ide

【分析】只须要提取数字,先后有固定的规律,所以符合使用断言匹配的条件。一样,也可使用分组匹配提取其中的内容。post

    {//使用断言匹配写法
        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]);
    }

这只是个小例子哈,若是有其余问题解决不了的,请留言博客。让博主也想一想办法,目前只能想到这个应用。测试

相关文章
相关标签/搜索