学习正则（第三天）看懂括号

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

对于编程来说空号的作用往往就是用来分组的，比如说在写一些比较长的条件判断的时候经常会用到，我们一起来看一下正则表达式中的括号（） 的作用吧。

01. 分组

看一下下图中（1）中的正则，我们匹配连续3次出现的字符b，那如果我们的变换一下，比如说我们待匹配的字符串为：abcabcdabcde，我们要匹配连续的abc要怎么办呢？这里我们就需要用到本篇要说到的括号了，请看下图中（2）的正则： ​

image.png

image.png

02. 分支结构

使用括号标记的子表达式同样提供了多选的支持即通过管道符来实现，在上图（2）中的两行字符的区别就是第一行为2组连续的abc，第二行为3组连续的abc，我们通过增加一个分组的形式来讲第一行进行匹配： ​

image.png

03. 使用分组提取/替换数据

这里我们沿用正则表达式迷你书v1.1版的案例（日期）相关，如常见的日期格式通常是yyyy-mm-dd，我们用正则表示一下，请看下图： ​

image.png

image.png

我们接着来增加括号准备提取数据，请接着看图，图片较大请按第四象限和下图（2）的可视化图： ​

image.png

image.png

我们接着用代码来演示一下提取结果： ​

image.png

我们再借助Js的replace函数来替换成yyyy/mm/dd的形式：

image.png

04. 反向引用

这里的反向引用指的是我们可以通过标识来引用正则之前出现过的分组，所以称之为反向引用。 ​

下图中的正则可以正确命中字符串2021-10-31 12:20:30和2021/10/31 12:20:30，但是有点意外的是2021-10/31 12:20:30这样的字符串照样能被命中，我们要怎么样才能使得前后年月和月天之间的符号保持一致呢？这里就用到了我们这小节的反向引用。

image.png

加入反向引用： ​

image.png

image.png

注意：切记是和前面引用内容一致的哦，比如说：\d{4}(-|\/)\d{2}\1\d{2}[\s]{1}\d{2}(:)\d{2}\2\d{2}。还要如果不能搞清楚分组情况的话可以通过可视化页面来辅助分析一下。 如果匹配的分组不存在，那么只会匹配反向引用的字符本身。 ​

05. 非捕获情况

即不在API里面引用，也不在正则里反向引用的话我们就需要使用到非捕获括号(?:p)和(?:p|p|p)。 ​

image.png

可以看到我们原来的分组2变成了分组1，而原来的分组1变成了原始的括号的作用。

image.png