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

淡淡的烟草味﹌ 2022-10-14 13:56 239阅读 0赞

![1b52a673f2b6c499a17bd98f956c604f.png][]

最近再一次重温**老姚**大佬的《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

![23970695623f7219960974a642c755ea.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![43d25a7fe70c491e16273b84e24aedd0.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[1b52a673f2b6c499a17bd98f956c604f.png]: /images/20221014/c33073e93e9b4e70bca50d90d01c50f0.png
[23970695623f7219960974a642c755ea.gif]: /images/20221014/f73536247bd246ac9d98b1ec635f21cc.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[43d25a7fe70c491e16273b84e24aedd0.gif]: /images/20221014/16e158159a9945cbbdcc1d75647f8742.png