动态正则表达式

4,482 阅读1分钟

最近在搞less文件监听编译的时候使用到了正则表达式,需要正则表达式来动态的匹配传入的文件扩展名称,遇到一些知识点,特此记录

1、想实现的功能

let ext = 'qss'; //动态变化,可能是wxss,css等
let input = `@import '../src.'${ext}`;  //String=> @import '../src.qss'

把匹配到的字符串,输出成为
let result = `@import (css) '../src'${ext}`;  //String=> @import (css) '../src.qss'

2、正则如何实现

静态匹配,只能匹配一种:

例如匹配qss的扩展名,正则应该是
let input = "@import '../src.qss'";
let reg = /@import\s+(\S+)\.qss/; //正则字面量表达式
let result = input.replace(reg, "@import (css) $1.qss");

但是以上代码只能匹配ext = qss扩展名的字符,要是ext = wxss我不能再写一个类似的regif处理吧,所以要解决的就是如何动态设置正则表达式的ext;

3、动态设置

动态匹配,依输入的ext匹配:

1.推荐的 字符串字面量+RegExp 实例

let originReg = /@import\s+(\S+)\.qss/; //原匹配规则,明显无法动态设置ext变量

let strReg = `/@import\s+(\S+)\.${ext}/`; // ext 可变,但不是一个正则表达式,无法到replace中使用

// 借助RegExp构造函数
let errorReg = RegExp(`/@import\s+(\S+)\.${ext}/`); // 输出=>  /@imports+(S+).qss/  明显跟我们期望的匹配规则是不同的

let rightReg = RegExp(`/@import\\s+(\\S+)\\.${ext}/`);// 输出=>  /@import\s+(\S+)\.qss/  这才是正确的匹配规则

原因是RegExp函数会将转义字符进行处理,那么errorReg中的字符串肯定就会输出不是我们想要的匹配规则;
所以才在rightReg 的转义字符\前,再加一层\;

2.不推荐的 字符串字面量+eval函数

let originReg = /@import\s+(\S+)\.qss/; //原匹配规则,明显无法动态设置ext变量

let strReg = `/@import\s+(\S+)\.${ext}/`; // ext 可变,但不是一个正则表达式,无法到replace中使用

// 借助eval函数

let errorReg = eval(`/@import\s+(\S+)\.${ext}/`); // 输出=>  /@imports+(S+).qss/  明显跟我们期望的匹配规则是不同的

let rightReg = eval(`/@import\\s+(\\S+)\\.${ext}/`);// 输出=>  /@import\s+(\S+)\.qss/  这才是正确的匹配规则

原因是eval函数同RegExp构造函数一样`会将转义字符进行处理`,解决方法也同RegExp方法