想看懂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

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

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 解析問題就不大啦。敬請期待~