從零開始學正則（五）

 壹 ❀ 引

我在  從零開始學正則（四） 一文中講述了正則匹配的回溯法，以正則匹配過程引出了正則書寫也會存在性能問題，並闡述了貪婪匹配，惰性匹配以及分支匹配時與回溯的中中關係。固然，對於初學者而言除了能寫出正則之外，能讀懂任意一段正則也是很是重要的。那麼本篇文章主要針對正則表達式拆分展開分析，相信你們在閱讀以後再面對各類變態長度的正則時，都能有理可據，化繁爲簡的拆分理解。

說在前面，正則學習系列文章均爲我閱讀 老姚《JavaScript正則迷你書》的讀書筆記，文中全部正則圖解均使用regulex製做。那麼本文開始！

 貳 ❀ 正則的解構與操做符

編程語言通常都有操做符（百科），但只要說到操做符就不得不討論操做符的優先級，由於一堆操做符在一塊兒，系統本身也得知道誰該先執行，誰要後執行。

那麼正則中的操做符是什麼呢？正則中的操做符體如今正則結構中，而結構又由特殊字符與普通字符構成。

JavaScript中的正則結構大體有這些：字符字面量、字符組、量詞、錨、分組、分支、反向引用。也就是前幾章節講過的知識點，咱們簡單複習一遍：

字符字面量：當咱們具體匹配某個字符時所寫的正則字段，好比a匹配字段「a」，123匹配字段「123」，\. 匹配小數點等。

字符組：當某個位置的字符多是多種狀況之一時，好比匹配任意一個數字，可使用字符組[0-9]，可簡寫爲\d。除此以外還有反義字符組，好比匹配除了數字以外的任意字符，能夠用[^0-9]，可簡寫爲\D。

量詞：當某個字符須要出現屢次時可以使用量詞加以修飾，好比數字可能出現1次或更屢次，能夠寫成\d{1,}，簡寫即是\d+。

錨：若是說字符字面量以及字符組是匹配的基礎，那麼錨的功能也是如此，只是前者用於匹配字符，而錨用於匹配位置。好比咱們要匹配數字前面的位置能夠寫(?=\d)。

分組：分組表示一個總體，使用圓括號()表示，好比(ab)+表示字母ab至少會出現一次。

分支：分支使用管道符 | 實現，好比分支 12|34，正則會先嚐試使用12進行匹配，若是行不通就會切換成分支34進行匹配，注意分支是惰性匹配。

其中涉及到的操做符以及優先級以下：

操做符描述	操做符	優先級
轉義符	\	1
圓括號和方括號	(p)、(?:p)、(?=p)、(?!p)、[p]	2
量詞	{m}、{m,n}、{m,}、?、+、*	3
位置和序列	^、$、\元字符、通常字符	4
管道符	|	5

知道了這些，咱們來從優先級的角度解析正則表達式 /ab?(c|de*)+|fg/ 

因爲不存在轉義符，咱們經過優先級第二高的括號來拆分正則，首先分組 (c|de*) 是一個總體，而在分組中字母 e 後緊跟了一個量詞 *，所以 e* 是一個總體，表示e會出現任意次。最後括號中使用了優先級最低的管道符，因此正則在運行時，必定是先看字母 c ，再看 de*，這裏造成了分支。

分析完分組中的內容，再看其它部分，能夠獲得a、b?、(c|de*)+、f、g這些組合結構，而 ab?(c|de*)+ 和 fg 又使用管道符分割，因此這是兩個比較大的分組。固然就算不這麼拆分，經過前面的學習解析起來也不是什麼難事。咱們結合圖解來確認下：

 叄 ❀ 結構與操做符可能犯錯的點

1.分支不使用分組包裹

在匹配整個字符串時，咱們一般會添加脫字符^與美圓符$，若是咱們要匹配字符 abc 或 def 時，容易寫成 /^abc|def$/，而此時正則的意思是匹配分支^abc或者def$，它的圖解是這樣：

而正確的寫法應該是利用分組將分支結構進行包裹，因此應該是這樣 ，圖解爲：

2.量詞接量詞

這個是我前面常犯得錯誤....量詞與量詞不能緊接着寫。好比咱們但願匹配數字1，2，3其一，,且這段數字長度爲3的倍數，正則很容易寫成 /^[123]{3}+$/ ，而後你會收到瀏覽器紅色問候：

var regex = /^[123]{3}+$/;
regex.test(123123);

而正確的寫法是 [abc]{3} 是一個總體，因此須要使用分組的括號包裹，完整就是這樣：

var regex = /^([123]{3})+$/;
regex.test(123123);// true

3.元字符轉義問題

正則中的元字符包括 ^、$、.、*、+、?、|、\、/、(、)、[、]、{、}、=、!、:、- 等。在咱們須要匹配這些字符時，到底需不須要轉義呢？固然全轉義確定也不會有問題：

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
regex.test(string); //true

開發中是否轉義仍是根據實際狀況決定，好比咱們真的要匹配字符 「[123]」 時 ，能夠在 [ 前添加轉義符，表示這不是一個反義字符組。

var string = "[123]";
var regex = /^\[123\]$/;
regex.test(string); //true

固然上述正則其實能夠簡寫成 /^\[123]$/ ，由於 [ 前已被轉義，後面的 ] 沒法成對，因此能夠省略轉義。

假設咱們要匹配 「[^123]」 時能夠寫成這樣，注意 ^ 的轉義不可少：

var string = "[^123]";
var regex = /^\[\^123\]$/;
regex.test(string); //true

同理，假設要匹配 「{1,3}」，正則咱們能夠寫成 /\{3,5}/ 。

注意有個特例，當匹配圓括號時，先後轉義符都得加，由於只寫一個會報錯。看個例子：

var string = "(123)";
var regex = /^\(123\)$/;
regex.test(string); //true

 肆 ❀ 總

這一章節內容的內容還算簡單，瞭解正則的操做符劃分對於複雜的正則拆分很是有幫助。固然在正則熟練後，咱們甚至能一眼看出正則所傳遞的匹配含義。咱們經過思惟導圖簡單作個整理：

最後留兩個思考題，請寫出匹配身份證的正則，以及嘗試分析正則 /^((0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/。

那麼本文就寫到這裏，我要學習第六章節了。