正则表达式

最近看到一个正则入门的网站：https://regexlearn.com/zh-cn/learn，以做题的形式学习正则，一页一个知识点；

看完发现有几个不熟悉或老是忘的，整理下来；

测试时可用在线的一些网页，比较好找，我一般都用这个：https://c.runoob.com/front-end/854/

基本语法

1、否定字符集：[^abc]

let str = 'cat eat fat'; 
str.match(/[^e]at/g);  // ['cat', 'fat']

2、引用捕获组：从1开始，\1 表示引用第一个捕获组，减少重复书写的成本

let str = 'ha-ha,haa-haa'; 
str.match(/(ha)-\1,(haa)-\2/g); // 'ha-ha,haa-haa'

3、非捕获组： (?:xx)

let str = 'ha-ha,haa-haa'; 
str.match(/(?:ha)-ha,(haa)-\1/g); // 'ha-ha,haa-haa'
// \1 匹配第二个括号内的正则

4、贪婪匹配

只要符合规则，尽可能多地匹配字符，js里的正则默认就是贪婪匹配

let str = 'der deer deeer deeer deeeeeer'; 
str.match(/d.*r/g); // 'der deer deeer deeer deeeeeer'

5、非贪婪匹配 / 懒惰匹配

let str = 'der deer deeer deeer deeeeeer'; 
str.match(/d.*?r/g); // ['der', 'deer', 'deeer', 'deeer', 'deeeeeer']

注意：这里匹配到的是多个项，贪婪匹配中匹配的是整个字符串；

零宽断言

1、正向先行断言: (?=)

要匹配后面是xx的字符，xx为限定条件，不出现在匹配结果中；

// 匹配后面是PM的数字
let str = 'Date: 4 Aug 3PM'; 
str.match(/\d+(?=PM)/g); // 3

2、负向先行断言: (?!)

匹配后面不是xx的字符

// 匹配后面不是PM的数字
let str = 'Date: 4 Aug 3PM'; 
str.match(/\d+(?!PM)/g); // 4

3、正向后行断言: (?<=)

匹配前面是xx的字符

// 匹配前面是$的数字
let str = 'Product Code: 1064 Price: $5'; 
str.match(/(?<=\$)\d+/g); // 5

4、负向后行断言: (?<!)

匹配前面不是xx的字符

// 匹配前面不是$的数字
let str = 'Product Code: 1064 Price: $5'; 
str.match(/(?<!\$)\d+/g); // 1064

上面四种情况，概括来说就是希望一个词出现或不出现在另一个词之前或之后。

名词区分：希望出现–正向，希望不出现–负向；先行后行指的是要匹配的字符在前边还是后边；

实际应用

1、匹配一个html标签

一般会使用非贪婪匹配，匹配一个目标标签；

let str = `
  <div class="header">这里是header信息</div>
  <div class="content">
    <p>这里是内容</p>
  </div>
  <div class="footer">这里是footer信息</div>
`;
let res1 = str.match(/<div class="header">[\s\S]+?<\/div>/g);
let res2 = str.match(/<div class="header">[\s\S]+<\/div>/g);

console.log(res1); // 非贪婪匹配：<div class="header">这里是header信息</div>
console.log(res2); // 贪婪匹配：匹配到整个字符串

这个场景中，贪婪匹配匹配到了整个字符串，非贪婪匹配只匹配到了第一个div标签。

* \s\S、\w\W、\d\D 都是匹配所有内容