ES9正则表达式新特性

Posted by 郑世杰 on 2021-11-28

ES9正则表达式新特性

1、正则命名分组

在es9之前使用正则表达式

1
2
3
4
5
6
let str = "abc123abc456";
const reg = /abc(.*)abc(.*)/;
const result = reg.exec(str);
console.log(result);
//结果如下
['abc123abc456', '123', '456']

如果正则表达式发生改变,那么后面访问正则表达式的匹配结果就需要修改,所以在es9之后可以这么写。

1
2
3
4
5
6
//语法为?<名称>
let str = "abc123abc456";
const reg = /abc(?<one>.*)abc(?<two>.*)/;
const result = reg.exec(str);
console.log(result.groups.one); //=>123
console.log(result.groups.one); //=>456

给匹配的结果命名,不用数组访问的方式,让代码可读性可维护性更高。

2、正则断言

正向断言

1
2
3
4
5
6
7
8
9
10
//语法:(?=XXX)  XXX是后面要跟的内容
let str = "abc123def456";
//使用断言
const reg1 = /[a-z]+(?=456)/;
const result1 = reg1.exec(str);
console.log(result1); //匹配到第二个字母串 def,因为后面有456
//不使用断言
const reg2 = /[a-z]+/;
const result2 = reg2.exec(str);
console.log(result2); //匹配到第一个字母串 abc

反向断言

1
2
3
4
5
6
7
8
9
10
//语法:(?<=XXX)  XXX是前面要跟的内容
let str = "abc123def456";
//使用断言
const reg1 = /(?<=123)[a-z]+/;
const result1 = reg1.exec(str);
console.log(result1); //匹配到第二个字母串 def ,因为前面有123
//不使用断言
const reg2 = /[a-z]+/;
const result2 = reg2.exec(str);
console.log(result2); //匹配到第一个字母串 abc

这样就可以判断目标前面或者后面跟着的内容了。

3、dotAll模式

在最后加一个s,可以让 . 匹配换行符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let str = `
<div>
<span>123</span>
<span>456</span>
</div>
<div>
<span>abc</span>
<span>def</span>
</div>
`;
const reg1 = /<div>\s+<span>(.*?)<\/span>/;
const reg2 = /<div>.*?<span>(.*?)<\/span>/s; //替换后,少些几个\s
console.log(reg1.exec(str));
console.log(reg2.exec(str));
//都匹配 <div> <span>123</span>