学习正则（第四天）拆分阅读

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」。

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

---

前言：

对于正则我们学了一下基础的知识，但是已经用在项目中的正则表达式你都读的懂吗？读不懂的话是不是又不放心呢？如何把复杂的一串串的正则拆解成便于理解的形式就变得很重要了。 ​

结构和操作符：

在正则表达式中操作符都体现在了结构中，就是又特殊字符和普通字符组成的整体。 ​

结构：

正则表达式的结构包括：字符字面量，字符组，量词，锚，分组，选择分支，反向引用。 ​

操作符：

名称	操作符	优先级
转义	\	1
括号和方括号	（...），（?:...），（?=...），（?!...），[...]	2
量词限定符	{m}，{m,n}，{m,}，？，*，+	3
位置和序列	^，$，\元字符，一般字符	4
管道符			5

场景分析：

整体匹配：

​

目标字符串：**abcd**、**bcde** ​

初次写出来的正则我猜会是这样/^abcd|bcde$/gm，通过管道符来分割成两个子模式，但是你看过下图后会发现合规的字符成功匹配，但是变种的字符串也被匹配了： ​

对于上面图片的问题，我们需要通过可视化来看一下，匹配abcd开头的字符和匹配bcde结尾的字符？ ​

由于位置字符的优先级要高于管道符，所以我们需要使用更高优先级的括号来进行分组，调整后的正则表达式见下图： ​

在调试工具中再看一下最终的结果： ​

​

量词连缀：

目标字符串满足每个字符a，b，c其中之一，字符串连续长度为3或3的倍数。 ​

这回你的正则会怎么写呢，会是下图中的这样吗？

很明显的看到这个加号出现的真不是时候，那多个3要怎么来表示呢？同样我们要用到括号（小括号）： ​

​

元字符转义：

在正则中的元字符（特殊字符）如包括：^，$，.，*，+，?，|，\，/，(，)，[，]，{，}，=，!，:，-。在需要匹配字符本身的时候就需要进行转义，转义字符为“\”，字符转义需按实际情况使用。 ​

如何匹配字符串[abc]呢？

[abc] 在正则表达式中为一个字符组，表示目标字符为a，b，c中的一个，那我们如何匹配字符串[abc]呢？当然也是转义了： 左括号转义后单个右括号不构成字符组，故不会引发歧义，不需要转义。 ​

如何匹配字符串{3,5}呢？

同理需要转义处理，请看下图： ​

案例分析：

简易身份证正则表达式：

正则表达式：/^(\d{15}|\d{17}[\dxX])$/gm

我们通过可视化分析得知，由于管道符的优先级最低，正则表达式被分成两个分支，由15个数字组成的第一个分支和由17个数字+一个数字或一个大写或小写X。 ​

IPV4正则表达式：

正则表达式：/^((0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/

似乎上面的这个可视化也很复杂是不是，我们再换一个工具来看一下分析结果： ​

第一步拆分：

1. 整体的结构分成了两部分匹配3次第一个表达式；
2. 匹配一次第二个表达式；
3. 现在上面的可视化有点眉目了吧，由数字+点组成的Group1，和仅有数字组成的Group2和Group3。

第二部拆分：

1. 前后两个表达式内容一致，最后一个表达式不需要比配点，故分析一个表达式即可；
2. 第一个分支：0~2个0+1位数字，匹配两位数字并前面补0；
3. 第二个分支：0+2位数字，匹配2位数字并前面补0；
4. 第三个分支：1+2位数字，匹配100~199；
5. 第四个分支：2+0~4其中一个+一位数字，匹配200~249;
6. 第五个分支：25+0~5其中一个数字，匹配250~255。

​

结语：

学习如逆水行舟，学习需积少成多，学习要坚持不懈。今晚学习的心得😴，下一篇见~

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。