![7222b635a79b652b3674bde9323535a9.png](https://img-blog.csdnimg.cn/img_convert/7222b635a79b652b3674bde9323535a9.png)
前言
正则一直是令我头大的问题,简单入门的那些还好,但是一旦复杂起来真是连百度都不知道他的用意,只能一小段一小段的试。
这篇会列举几个 vue 源码中的几个正则表达式,为什么选取这些呢?
因为我近段时间在深入学习 vue 的代码,同时觉得这些表达式也是非常具有实战性的,相信对我们以后实现业务逻辑会有很大的启发和帮助。
几个基础概念
如果你对正则表达式如下概念不熟悉,有必要的话可以再回顾下。(当然只针对下面例子涉及的概念)
部分正则规则
![72e745106c205113c32b38944d1b54cb.png](https://img-blog.csdnimg.cn/img_convert/72e745106c205113c32b38944d1b54cb.png)
常用符号
![d3c618fa97ad2c8ce829eea2a001aa9c.png](https://img-blog.csdnimg.cn/img_convert/d3c618fa97ad2c8ce829eea2a001aa9c.png)
多次匹配
![edc81b149afc1bd5da54b04b43c58a87.png](https://img-blog.csdnimg.cn/img_convert/edc81b149afc1bd5da54b04b43c58a87.png)
任意字符
![64871c2c66b9848ad2f64453c0f5506b.png](https://img-blog.csdnimg.cn/img_convert/64871c2c66b9848ad2f64453c0f5506b.png)
特殊字符
![2ca7d02bf3e8648429291e1cf1d38ed3.png](https://img-blog.csdnimg.cn/img_convert/2ca7d02bf3e8648429291e1cf1d38ed3.png)
特殊规则
test exec match 区别
- test 不需要知道匹配内容,只需判断正则是否命中的场景
- exec 进行搜索匹配,返回匹配结果
- match 是 String 对象方法,和 exec 类似
看几个小 demo :
![2f3b0df959ae18f6835742a0c25b172d.png](https://img-blog.csdnimg.cn/img_convert/2f3b0df959ae18f6835742a0c25b172d.png)
在全局模式下, match 不会有额外 索引 index 、 被匹配数据 input 的输出。并且只有所有匹配的数据。
非括号捕获
匹配 (?:x) 中 x 表达式,但不记住选项。
![ff0ce8a076ac48714eb68ff5bbfc02e8.png](https://img-blog.csdnimg.cn/img_convert/ff0ce8a076ac48714eb68ff5bbfc02e8.png)
似乎从结果上看,这两者没什么区别。我通过调用字符串 replace 方法后,你再看下:
![b6570cb3f3446e6e2a2ee8808123f203.png](https://img-blog.csdnimg.cn/img_convert/b6570cb3f3446e6e2a2ee8808123f203.png)
你应该能看到其中的区别了吧。
replace
replace 作为 String 对象中的方法,相比都经常使用。
但如果将 replace 第一个参数传入正则表达式,第二个参数而一个函数 Fn ,那是否知道 Fn 的参数列表有什么特殊作用吗?
![f35e1333dcb3a7c9197ccf1837b218c7.png](https://img-blog.csdnimg.cn/img_convert/f35e1333dcb3a7c9197ccf1837b218c7.png)
Function 的参数说明:
- match 匹配内容
- $1,$2 … 括号捕获内容
- offset 匹配开始位置
- string 源字符串
结合 括号捕获 和 非括号捕获 应该很容易明白:
![d3ef022f52bf45846e1ec71d74611463.png](https://img-blog.csdnimg.cn/img_convert/d3ef022f52bf45846e1ec71d74611463.png)
![7d86b2408af06664a6c6189f730c7751.png](https://img-blog.csdnimg.cn/img_convert/7d86b2408af06664a6c6189f730c7751.png)
html 注释判断
vue 会解析我们 html 模板,html 中的注释肯定没有任何意义,所以有必要将它过滤掉。
那怎么匹配出现的注释内容呢?
![88e0138652bf1fcfe323f15d87b9c414.png](https://img-blog.csdnimg.cn/img_convert/88e0138652bf1fcfe323f15d87b9c414.png)
直接上正则逻辑:
![688ceb703b8b0648365e0ae66ff1a0f8.png](https://img-blog.csdnimg.cn/img_convert/688ceb703b8b0648365e0ae66ff1a0f8.png)
上面摘自 vue 中 parseHtml 方法,相对简单。
利用 test 判断当前 html 内容是否符合预期,配合“固定”注释的左右标识,记录当前注释结束为止,为下次新的 html 解析做准备。
驼峰表达式转换
![20fee710a432a9247d10172e3bf57d60.png](https://img-blog.csdnimg.cn/img_convert/20fee710a432a9247d10172e3bf57d60.png)
我们可能会用 abc-def 的方式定义对象的属性名,或者 vue 中非规范的定义, vue 框架就会有统一的处理,将 abc-def 统一转化为 abcDef 驼峰写法。
解析 html 属性 Key-Value
![fdb5cf454c425fd88ebd8df8b40cb102.png](https://img-blog.csdnimg.cn/img_convert/fdb5cf454c425fd88ebd8df8b40cb102.png)
我们先看这段正则的匹配输出结果:
![edf06cb50807fd52f83f9bd2c8ee2093.png](https://img-blog.csdnimg.cn/img_convert/edf06cb50807fd52f83f9bd2c8ee2093.png)
按照顺序,开始分析:
我先把这个正则简化下:
![8d025457dc5b8ce7996889c5937336a1.png](https://img-blog.csdnimg.cn/img_convert/8d025457dc5b8ce7996889c5937336a1.png)
第一部分 A ,匹配任何空白字符,并且空白符可出现 or 未出现过:
![6e5233387e9d79615672dc31f36d099e.png](https://img-blog.csdnimg.cn/img_convert/6e5233387e9d79615672dc31f36d099e.png)
随后跟着一个 括号捕获 表达式 B:
![e8101ea8f28cfa12c8b9a4e92561b12e.png](https://img-blog.csdnimg.cn/img_convert/e8101ea8f28cfa12c8b9a4e92561b12e.png)
用 [] 中括号包裹,并且里面匹配的内容至少要出现一次。
注意内部内容的 ^ 并不是说明以其开头,而是 非 s”‘<>/= 这些字符,从而 取出属性的 key。
后面将是个复杂的 非括号捕获
![bcef4231922c2cddd6e1067689ab5d92.png](https://img-blog.csdnimg.cn/img_convert/bcef4231922c2cddd6e1067689ab5d92.png)
我们先分析其中三个括号捕获 DEF:
![b5b20d02f97dc6aa8f7f8eb794f8d5bc.png](https://img-blog.csdnimg.cn/img_convert/b5b20d02f97dc6aa8f7f8eb794f8d5bc.png)
仔细看不难发现,D 和 E 是针对不同的引号(双引号、单引号)包裹内容来匹配的,并且内部不能出现外部的引号。
F 和之前的 B 类似,唯独去除了斜杠限制。
![48b81664b0c300c00b74952b732dc2ef.png](https://img-blog.csdnimg.cn/img_convert/48b81664b0c300c00b74952b732dc2ef.png)
最后针对 DEF 的结果,来做非括号匹配。就能 取出属性的 value
既然知道了属性的 key、value 取值方式,那么 C 的作用也显而易见了:
![1584772bb62e0345dfd4beac2fc1885e.png](https://img-blog.csdnimg.cn/img_convert/1584772bb62e0345dfd4beac2fc1885e.png)
用等号 = 作为分隔符,取出整个 key=value 的值。
那么再回头看之前正则对应的输出结果就容易些了。
正则的封装
讲个轻松些的,如下是个判断 html 起始标签的正则:
![8085171b8dc28605291a5e9a4fcd62e8.png](https://img-blog.csdnimg.cn/img_convert/8085171b8dc28605291a5e9a4fcd62e8.png)
能发现整个正则表达式很长,虽然逻辑不复杂,但看起来真的很揪心。
我们看看 vue 是怎么做的?
![f7ab7724ac54cd4c1465c6ad0333c133.png](https://img-blog.csdnimg.cn/img_convert/f7ab7724ac54cd4c1465c6ad0333c133.png)
使用正则的 source 属性,我们能拿到正则表达式的字符串,同时需要注意所有交付给 new RegExp 的参数,对其中的斜杠需要作次转义。
这样通过 es6 的 表达式和 RegExp 对象,将原先繁琐的正则表达式优化成多个变量定义,现在我们能按其意思快速的理解正则了。
总结
上面这些例子只是个引子,我希望同我一样惧怕正则表达式的同学能正视它,因为表面看上去它很复杂,但其实耐心些,像主流框架些的正则都是能挖掘很多内含的东西。
希望这篇文章能让你的正则能力提升一个台阶。