零宽断言正则表达式替换方案

一、背景

safari浏览器不支持零宽断言正则表达式

二、解决方案

使用其他正则替换零宽断言正则（包含：(?<=)正向肯定预查、(?<!)正向否定预查、(?=)反向肯定预查、(?!)反向否定预查）

三、涉及场景

1、仅校验，不取值

如表单正则校验，如editor\src\editor\Editor\constant\todoPropsList.js:2093,此类场景可能需要重新编写（改动可能较大）正则, 无需经过zeroWidthRegPolyfill方法

2、校验，并取值

2.1、正则表达式不含g

如packages\editor\src\CompEvent\hooks\useFunctionValue.tsx:17,需注意改写表达式后，后续取值可能会跟随分组而变化，无需经过zeroWidthRegPolyfill方法

2.2、正则表达式含g

如editor\src\editor\Editor\components\pageDetail\CodeMirrorModal\CodeMirrorModal.jsx:87,将正则/(?<=actionMap(\['|\[|\.))[^.[\s"']+?(?==|\s|'|])/g，改为/actionMap(\['|\[|\.)([^.[\s"']+?)(=|\s|'|])+?/g ，使用zeroWidthRegPolyfill方法处理

四、方法使用说明

涉及方法(主要处理正则含g的正则表达式)：

packages\editor\src\utils\common.ts -> zeroWidthRegPolyfill(str, reg, n=1)

const zeroWidthRegPolyfill = (str, reg, n = 1) => {   let result = null;   const originRegStr = reg.toString();   const regStr = originRegStr.replace(/^\/(.*)+?(\/|\/g)$/, '$1');   const regWithoutG = new RegExp(regStr);   if (originRegStr.endsWith('g')) {     const arr = str.match(reg);     if (!arr) {       return result;     }     result = [];     arr.forEach((it) => {       result.push(it?.match(regWithoutG)?.[n]);     });   } else {     result = str.match(regWithoutG);   }   return result; };

1、reg含g，入参为校验字符串str、不含零宽的正则reg，以及需要真正匹配获取的字符所在的分组（必须对需要获取的字符分组）的序号n。str.match(reg)返回含目标字符的字符串数组，需要通过it?.match(regWithoutG)?.[n]二次处理，返回仅含目标字符的字符串数组

1.1、至于为啥要二次处理，这里需要知道match的使用及返回值，以下做简要对比：

 1.2、当然，使用matchAll能够一次性获取所有的匹配，并且返回带有分组信息的数组，但ie浏览器不支持

2、如传入不含g的表达式，则效果等同str.match(reg)。

3、使用该方法与零宽断言的区别

先看案例：

 可以发现，零宽实现匹配了3个结果，非零宽匹配了2个结果，这是因为“零宽正则”匹配完了之后，会从匹配到的字符开始继续匹配，预查不消耗字符

一般场景，其实是需要消耗字符的。但是，如果需要完全与零宽正则相匹配，则需要使用升级版方法。

const zeroWidthRegPolyfillPlus = (str, reg, n = 1) => {   let result = null;   const originRegStr = reg.toString();   const regStr = originRegStr.replace(/^\/(.*)+?(\/|\/g)$/, '$1');   const regWithoutG = new RegExp(regStr);   let hasMatch = true;   // 实现零宽预查补偿消耗字符，循环匹配   // const loopReg = (_str, res) => {   //   hasMatch = false;   //   const nextStr = _str.replace(regWithoutG, function () {   //     hasMatch = true;   //     res.push(arguments[n]);   //     return arguments[n + 1];   //   });   //   if (hasMatch) {   //     loopReg(nextStr, res);   //   }   // };   if (originRegStr.endsWith('g')) {     result = [];     // 实现补偿方法一：     // loopReg(str, result);     // 实现补偿方法二：     let nextStr = str;     while (hasMatch) {       hasMatch = false;       nextStr = nextStr.replace(regWithoutG, function () {         hasMatch = true;         result.push(arguments[n]);         return arguments[n + 1];       });     }   } else {     result = str.match(regWithoutG);   }   return result; };  // 目标：查找$$之间包裹的所有字符串 const str = '$abc$d$ef$'; // 1、零宽实现 const regZero = /(?<=\$).*?(?=\$)/g; let result = str.match(regZero); console.log('result1:', result); // 返回 result = ['abc', 'd', 'ef'] // 此处需要将正向肯定预查进行分组，以便方法中能够将预查的字符消耗重新补上 const reg = /\$(.*?)(\$)/g;  result = zeroWidthRegPolyfillPlus(str, reg); console.log('result2:', result); // 返回 result = ['abc', 'd', 'ef']