想看懂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 解析问题就不大啦。敬请期待~