学习Vue中那些正则表达式

想看懂Vue的template解析部分，会发现其中有大量的正则表达式。所以先学习基础知识。

其实正则表达式并不难，关键在于拆分理解，并且经常使用。就可以很好的熟悉正则表达式了。具体语法可参照正则表达式 - JavaScript | MDN 。

正则用法

在JavaScript中正则表达式用法为：

/正则表达式特殊字符/修饰符(可选)

特殊字符

这里列一下正则的特殊字符及其用法，加深理解和映象。
* \ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n，特殊符号 ( 变为字符 \(。
* ^ 匹配字符串起始位置。
* $ 匹配字符串结束位置。
* * 匹配前面的子表达式零到多次。
* + 匹配前面的子表达式一到多次。
* ? 匹配前面的子表达式零到一次。
* {n} 匹配前面的子表达式的n个，如 o{2} 能够匹配 food 不能匹配 god。
* {n,} 至少匹配n个前面的子表达式，如 o{2,} 能够匹配 fooooood 不能匹配 god。
* {n, m} 至少匹配n次，至多匹配m次。
* 非贪婪模式 默认为贪婪模式，如 o+ 将匹配 foooood 的所有 o。而非贪婪模式（在匹配符后面加 ?），如 o+? 则只会匹配一个o
* . 匹配除换行符外任何单个字符。换行符为 \n 和 \r。
* (x) 捕获括号，匹配并记住匹配项。
* (?:x) 非捕获括号，匹配并不记住匹配项。如 /(?:foo){1,2}/，这里将 foo 作为一个整体进行匹配1到2次。
* x(?=y) 匹配x仅仅在x后面跟y的时候。?=y 表示字符串末尾是y。
* x(?!y) 匹配x仅仅在x后面不跟着y的时候。?!y 表示字符串末尾不是y。
* x|y 匹配 x 或 y，如 jack|rose 就可以匹配到 jack 和 rose 两个字符串。
* [xyz] 匹配方括号内任意字符。
* [^xyz] 反向字符集，匹配除方括号内字符的任意字符。
* [0-9] 范围匹配，匹配0-9范围内任意字符。
* \w 查找单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。
* \W 查找非单词字符。
* \d 查找数字字符。
* \D 查找非数字字符。
* \s 查找空白字符。空白字符包括空格、\n、\f、\r、\t、\v。
* \S 查找非空白字符。
* \b 匹配单词边界，通常匹配单词开头和结尾。如 /\bcd/ 匹配 cdkey。
* \B 匹配非单词边界。如 /\Bcd/ 匹配 abcd。
* \O 查找 NULL 字符。
* \n 换行符。
* \f 换页符。
* \r 回车符。
* \t 制表符。
* \v 垂直制表符。

修饰符

• i 执行对大小写不敏感的匹配。
• g 执行全局匹配。
• m 执行多行匹配。

简单正则实例分析

上面介绍了正则的简单用法，下面收集一些简单的正则进行分析。

/^[0-9]*$/

0-9范围内0到多个数字的组合，且字符开头结尾都是0-9的数字。即表示整数。如 1314、0

/^\d{m,n}$/

匹配m-n位的数字。由于开头结尾都是数字，所以它是一个固定长度的纯数字。

/^\-[1-9][0-9]*$/

匹配-开头，数字结尾，第一个字符为1-9，随后0-n个字符为0-9的字符。即非零负整数。

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

这是匹配邮件的一个正则，我们一点点看。
开头匹配1-n个单词字符;
括号里匹配 [-+.] 字符加上1-n个单词字符，括号内容匹配0-n次；
加上@字符；
加上1-n个单词字符字符
括号里匹配 [-.] 字符加上1-n个单词字符，括号内容匹配0-n次；
加上.字符
加上1-n个单词字符字符
括号里匹配 [-.] 字符加上1-n个单词字符，括号内容匹配0-n次；
结尾；
这里考虑了很多因素邮箱命名因素，一般的邮箱地址像 [email protected] 这种肯定是没问题的。所以，我极端测试来展现它列出的可能性，结果如下（我把所有可能性都符合了一遍）：

/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

再来看个手机号验证。一步步来：
开头匹配手机号前三位是 13[0-9] 或 14[5|7] 或者 15[0|1|2|3|5|6|7|8|9] 或 18[0|1|2|3|5|6|7|8|9]；
匹配后八位数字为0-9的字符；
结束。

/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/

这是验证身份证的正则，来看看：
开头为一个1-9的数字；
加上五位0-9的数字；
加上一位1-9的数字；
加上三位0-9的数字；
加上 0/d 或者 1[0-2]，即月份 01、02……12；
加上 ([0|1|2]\d) 或者 3[0-1]，即日起，01、13、25、31；
加上身份证末四位；

/^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$/

这是xml文件命名正则。
开头为 1-n个 [a-zA-Z] 字符 加上 0-1个 - 组成；
括号内的内容可重复1-n次；
加上1-n个 [a-zA-Z0-9] 字符;
加上 ·.·;
加上 x 或 X;
加上 m 或 M;
加上 l 或 L;
结尾;

解析 Vue 源码中的正则

/;(?![^(]*\))/g

由于 ?! 符号，所以是匹配 ; 字符。
我们之前说过，?! 符号表示字符串末尾不是指定字符串。
这个指定字符串 [^(]*\) 解析为 0-n 个不为 ( 的任意字符加上 )。
用例子说明。匹配条件为 ; 字符后面不能跟 ;xx)xx 但是可以跟 ;(xx)xx

/:(.+)/

以上正则表示匹配 : 加上 1-n 个 .

var defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g;
var regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g;

defaultTagRE 的正则：匹配 {{ 字符，然后匹配非换行符或 \n (即排除了 \r)，最后加上 }}。
regexEscapeRE 的正则：全局匹配 -、.、*、+、?、^、$、{、}、(、)、|、[、]、/、\。注意，只有在 () 中 | 才表示或，如 /(g|f)ood/。

/&(?:lt|gt|quot|amp|#10|#9);/g

匹配 <、>、"、&、 、 。

var onRE = /^@|^v-on:/;  // 以@或v-on开头的字符
var dirRE = /^v-|^@|^:/; // 以v-、@、：开头的字符
var forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/; // 匹配如 item in list 或者 item of list
var forIteratorRE = /\((\{[^}]*\}|[^,]*),([^,]*)(?:,([^,]*))?\)/;

var argRE = /:(.*)$/; // 匹配 : 加上 0-n 个非换行字符结尾的条件
var bindRE = /^:|^v-bind:/; // 匹配 : 或 :v-bind 开头的字符
var modifierRE = /\.[^.]+/g; // 全局匹配 `.` 加上 1-n 个非 `.` 字符。

解析一下这个 forIteratorRE，其实就是看着乱。
先得到一个 ( 字符；
再获取 (\{[^}]*\}|[^,]*) ，这里匹配的是 { 加 0-n 个非 } 字符加 }，或者 0-n 个非 , 字符。
加上字符 ,;
得到 ([^,]*) , 这里匹配的是 0-n 个非 , 字符；
得到 (?:,([^,]*))?\)，加上字符 , 然后加上 0-n 个非 , 字符，这整个表达式，数量为 0-1；
最后加上 )。
所以匹配字符串可以是 (,)、({abc},wc,uvw)。

/'(?:[^'\\]|\\.)*'
|"(?:[^"\\]|\\.)*"
|`(?:[^`\\]|\\.)*\$\{
|\}(?:[^`\\]|\\.)*`
|`(?:[^`\\]|\\.)*`/g

以上正则看似很长，其实通过 | 或关系进行拆分，敲回车便于查看后发现，其实是由五个表达式组合起来的。
逻辑差不多，看第一个表达式：先添加' ，然后添加0-n个非 ' 和 \ 的字符，最后加上 '。如 'abc' 。

/-(\w)/g

先添加 - 字符，再添加单词字符，进行匹配。

/\B([A-Z])/g

不在单词边界上的 A-Z 的字母字符，如 rAr。

/(?:^|[-_])(\w)/g

字符串第一个字符为单词字符，或者以 [-_] 加字符形式出现的匹配。

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

再长的正则拿到手就需要进行拆分：
^\s* 表示以0-n个空白字符开头；
([^\s"'<>\/=]+) 表示有1-n个非 空白字符、"、'、<、>、\、/、=的字符。
最后一个表达式较长，而且由于表达式最后有 ?，所以这段表达式可以不匹配。先是0-n个空白字符，加上 = 号，加上 0-n 个空白字符。之后有三种情况：情况一：加上 “，加上 0-n 个非空白字符，再加上1-n个 ”；情况二：加上 '，加上 0-n 个非空白字符，再加上1-n个 '；情况三：加上1-n个非 空白字符、"、'、=、<、>、` 的字符。

最后

正则表达式看到这也算是有了一定了解了。
其实只要懂得正则基本语法、然后耐心去看去理解，会发现正则也不是那么难的。
这里推荐 https://regex101.com/#javascript 这个工具，本博客就是一边用这个工具实践验证一边写的，非常好用！
我先通过猜测理解正则大致意思，然后用这个工具去验证，验证成功，反推回来更好理解正则表达式。
就是这样！

明日预告

既然正则被我们搞定了，那么明天写 Vue 的 template 解析问题就不大啦。敬请期待~