最近在搞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
我不能再写一个类似的reg
去if
处理吧,所以要解决的就是如何动态设置正则表达式的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方法