【正则】964- 正则表达式的括号如何使用？

最近再一次重温老姚大佬的《JavaScript 正则表达式迷你书》 ， 并将核心知识点整理一遍，方便复习。

原书写得非常棒，建议看下原书啦。  地址：https://github.com/qdlaoyao/js-regex-mini-book

回复“8”加入面试题分享群

简单理解：括号提供了分组，便于我们使用它。

通常有两种引用情况：在JS代码中引入，和在正则表达式中引入。

分组和分支结构，主要是强调括号内是一个整体，即提供子表达式。

• 分组如 ​​/(ab)+/g​​ 匹配连续出现的 ​​ab​​  。
• 分支结构如 ​​/(a|b)+/g​​ 匹配出现的 ​​a​​ 或 ​​b​​ 表达式。

1.分组引用

如在日期匹配的时候，就可以这么改造：

// 原来
let r = /\d{4}-\d{2}-\d{2}/;

// 现在
let r = /(\d{4})-(\d{2})-(\d{2})/;

• 提取数据

"2019-03-14".match(r);
r.exec("2019-03-14");
// ["2019-03-14", "2019", "03", "14", index: 0, input: "2019-03-14"]

RegExp.$1; // "2019"
RegExp.$2; // "03"
RegExp.$3; // "14"

• 替换

将 ​​yyyy-mm-dd​​​ 转成 ​​mm/dd/yyyy​​。

"2019-03-14".replace(r, "$2/$3/$1");
// 等价于
"2019-03-14".replace(r, function(){
    return RegExp.$2 + '/' + RegExp.$3 + '/' + RegExp.$1;
});

2. 反向引用

使用 ​​\n​​​ 表示第 ​​n​​​ 个分组，比如 ​​\1​​​ 表示第 ​​1​​ 个分组：

let r = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
r.test("2019-03-15");
r.test("2019/03/15");
r.test("2019.03.15");
r.test("2019-03/15");

• 多个括号嵌套

按照开括号的顺序：

let r = /^((\d)(\d(\d)))\1\2\3\4$/;
let s = "1231231233";
r.test(s);
console.log([RegExp.$1,RegExp.$2,RegExp.$3,RegExp.$4]);
// ["123", "1", "23", "3"]

• 特殊情况

​​\10​​​ 表示的是第 10 个分组，若要匹配 ​​\​​​ 和 ​​0​​​ 时，使用 ​​(?:\1)0​​​ 或 ​​\1(?:0)​​。

let r = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
let s = "123456789# #####";
r.test(s);  // true

• 当引用不存在的分组

如匹配 ​​\2​​​ 是前面不存在，则匹配 ​​\2​​​ 本身，即对 ​​2​​ 的转义，不同浏览器可能不同：

let r = /\1\2\3\4/;
r.test("\1\2\3\4");  // true
"\1\2\3\4".split('');// ["", "", "", ""]

• 分组后面有量词

当分组后面有量词的话，则捕获的是最后一次的匹配：

"12345".match(/(\d)+/); // ["12345", "5", index: 0, input: "12345"]

/(\d)+ \1/.test("12345 1"); // false
/(\d)+ \1/.test("12345 5"); // true

3. 向后引用

​​\n​​​ 表示后向引用， ​​\1​​​ 是指在正则表达式中，从左往右数第1个 ​​()​​​ 中的内容；以此类推， ​​\2​​​ 表示第2个 ​​()​​​， ​​\0​​ 表示整个表达式。

let rgx = /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/
rgx.test("2020-01-05") // true
rgx.test("2020-01.05") // false

上面案例中，​​\1​​​代表重复 ​​(\-|\/|.)​​ 。

4. 相关案例

这里只写出核心代码。

• 模拟字符串 ​​trim​​ 方法

// 1 匹配首尾空白符，替换成空字符
"  aaa   ".replace(/^\s+|\s+$/g, "");      // "aaa"

// 2 匹配整个字符串，再用引用提取对应数据
"  aaa   ".replace(/^\s*(.*?)\s*$/g, "$1");// "aaa"

• 每个单词首字母大写

"hi leo hi boy!".toLowerCase().replace(
    /(?:^|\s)\w/g, 
    c => c.toUpperCase()
);
// "Hi Leo Hi Boy!"

• 驼峰化 和 中划线化

"-leo-and-pingan".replace(/[-_\s]+(.)?/g,
    (match, c) => c ? c.toUpperCase() : ''
);
// "LeoAndPingan"

"LeoAndPingan".replace(/([A-Z])/g, "-$1").replace(
    /[-_\s]+g/,"-"
).toLowerCase();
// "-leo-and-pingan"

• 匹配成对HTML标签

匹配成对标签 ​​<h1>leo<\h1>​​​，而不匹配不成对标签 ​​<h1>leo<\h2>​​。

let r = /<([^>]+)>[\d\D]*<\/\1>/;
r.test("<h1>leo leo leo</h1>");  // true
r.test("<a>leo leo leo</a>");    // true
r.test("<h1>leo leo leo</h2>");  // false