正则表达式学习(一):Vue模板解析

854 阅读2分钟

Vue在解析Template的时候,使用了正则表达式,其中最复杂的就是对于属性的解析,本文主要通过静态属性与动态属性的正则来复习一下正则中容易忽略的知识点。

attribute

下面是Vue源码中对于静态属性的解析。

表达式的长度很长,刚开始会有点头痛,不过可以看到表达式中有许多小括号,貌似小括号把表达式分成了好几部分。

捕获:()

在正则表达式中,小括号()表示捕获的意思。对于字符串类型,有match,match方法返回一个类数组,对象内部包含了捕获组,也就是说通过()包裹起来的内容都可以被捕获到。

例如:下面图片中使用match返回一个类数组,其第一位为匹配到的结果,第二位e为捕获的内容。

回到attribute,先通过()把正则分成三部分

第一部分

^\s*: *表示0个或多个,\s为空格符号,^表示以^后面内容开头的字符,那么连起来就是属性可以是以空格开头的字符串

第二部分

([^\s"'<>\/=]+)

单个匹配:[]

只匹配一个字符,字符满足[]内的内容

非:[^]

匹配一个字符,看该字符不满足[^]内的内容

转义符号:\

对于在正则表达式中有特殊含义的字符,需要使用\符号进行转义。

([^\s"'<>/=]+):捕获 非空白字符,非“,非‘,非<,非>,非/,非=的长度至少为1的字符

第三部分

(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?

匹配但不捕获:?:

例如:虽然()内的e符合条件,但是match返回的结果中没有‘e’

或:|

字面意思

3.1 捕获等号

:\s*(=)\s*:等号前后可以有空格

3.2 第一种属性值的写法

"([^"]*)"+,至少有一个“value”形式的值,捕获value

3.3 第二种属性值的写法

‘([^‘]*)‘+,至少有一个‘value‘形式的值,捕获value

3.4 第三种属性值的写法

([^\s"'=<>`]+),捕获非空格,非“,非',非=,非<,非>,非`符号的长度至少为1字符串

测试用例

dynamicArgAttribute

这里就简单分析一下:

\w:[A-Za-z0-9_]

(?:v-[\w-]+:|@|:|#) 匹配 v-字符串: 或 @ 或 :或 #

[[^=]+]

捕获[]包裹的非=字符串

[^\s"'<>/=]*

([^\s"'=<>]+),捕获非空格,非“,非',非=,非<,非>,非符号的长度至少为1字符串

测试用例