讀懂那些火星（正則）表達式：捕獲元與非捕獲元

想讀懂世間全部的那些變態正則表達式？作夢，年紀輕輕，想啥呢，盡本身最大努力學就行

引子

JS學了用了也快一兩年了，對象啥的找到了也會用了，繼承啥的也入門了，但看別人的框架代碼，老是會隨時卡殼，有一個重大的緣由，就是那看不懂的一串串火星文字（正則表達式），學習嗎，就是查缺補漏，不怕你不懂，就怕你以爲本身全懂了。說正事以前，先推薦一款軟件:RegexBuddy，不管是作正則的測試仍是過程的研究，都是一款利器。

知識彙總

語法複習，重點三塊知識：

1. 貪婪匹配（? 0=<x<=1,+ x>=1,* any）與那些相關的限定符({n},{n,m});
2. 特殊字符：^ $ . * + ? = ! : | / ( ) [ ] { }
   ，火星文，基本就是他們組成的，要想匹配字符的本意，字面量表達式在特殊字符前加單斜槓，用new聲明的須要加雙斜槓；
3. 非捕獲元字符：?:,?=（正向預查）,?!（負向預查）；
4. 回溯引用,前面的字符匹配基本都和他有關；
5. 其餘，什麼字符邊界啊，括號啊，中括號啊，等等 ；

正則表達式解析原理：這個不算我等渣暫時能寫出來的，推薦一篇

層層遞進剖析

貪婪匹配

先理解貪婪匹配，正則表達式的平常應用基本也就知足了，在菜鳥教程的語法開篇就已經提的很詳細了，好比有一個regex:/Chapter[1-9]/,這個字符串咱們只能匹配到Chapter1-Chapter9,也就是Chapter的一級標題，但咱們想匹配到二級或者三級標題怎麼辦，這裏就用到了貪婪匹配，就是在目標字符串中最大化的匹配結果，將前面的regex:/Chapter[1-9]/改爲/Chapter[1-9]+/，這樣咱們就能匹配Chapter1,Chapter12,Chapter123,但若是咱們將其改成/Chapter[1-9]?/,這個不管/Chapter後面輸入多少個數字，都只能最多匹配一個數字，這裏就是Chapter1，但與最初的表達式不一樣的是，這個表達式也能匹配裸的Chapter，這就是所謂（X？），問號前面的X可出現0次或者1次，當咱們將其改成/Chapter[1-9]星號（避開markdown語法）/，這個最後能夠達到？和+共同的結果,也就是所謂的，x出現任意次數。上面這些咱們也能夠經過[n,m]即n=<x<=m來匹配x出現的次數，{0,1}實現的效果等價與?，而{1,}等價於+，{0,}等價於星號（避開markdown語法）。

懶惰匹配

與貪婪匹配成對的另外一個叫懶惰匹配，在前面出現的全部貪婪匹配後面加上一個?，這樣整個表達式就成了懶惰匹配，能夠理解爲最小化匹配，好比/Chapter[1-9]+/匹配Chapter12345的結果是Chapter12345,但/Chapter[1-9]+？/匹配的結果就是Chapter1；/Chapter[1-9]{2,4}/匹配結過是Chapter1234，而/Chapter[1-9]{2,4}？/結過是Chapter12，這就是所謂的最小化去匹配結果，取下限，一般稱爲懶惰模式。

捕獲元與非捕獲元

之前看到什麼?:,?=,?!，用的少，也就沒留意，最近大面積災荒，常常看到，甚是恐懼，以致於前面在讀gulp裏面遇見個regex表達式：/-[0-9a-f]{8,10}-?/(匹配app-7ef5d9ee29.css這一類表達式中的md5值),就一頭栽進去，'-?'到底又有什麼特殊的含義，最後才發現，那TMD就是一個貪婪匹配，你個蠢貨，但確實搞不懂源碼做者在想啥，也許是我沒碰到app-7ef5d9ee29-any.css這樣的文件名，要不非得多加個'-?'幹啥，讓我直往坑裏跳。
回到正題，先搞懂什麼叫捕獲組，歸納起來就是，用括號如‘（pattern）’這樣的形式，匹配知足括號中的，就是一個捕獲組。先看一張來自於菜鳥教程的定義：
四種形式，加?和不加有什麼區別，區別就是捕獲元與非捕獲元，表現形式就是用exec方法去匹配，捕獲組會單純保存在一組變量中。理論太枯燥，直接看例子，來源於JS高設page106，略有改動：

var str ='mom and dad and baby';
    var pattern = /mom( and dad( and baby))/; //捕獲元形式
    var pat= /mom(?: and dad(?: and baby))/; //非捕獲元形式
    var mat = pattern.exec(str);
    var match = pat.exec(str);
    console.log(mat)；
    console.log(match)；

看着devtools打印的結果，是否是有點眉目，是的，匹配的結果雖一致，但捕獲組匹配時，將知足捕獲元形式的單元單獨保存爲一個匹配結果，而非捕獲元不單獨保存，只保存完整匹配結果。咱們常見的Regexp.$1,$2其實就是對捕獲組結果的引用。
捕獲元與非捕獲元搞懂了，那(?:pattern)與(?=pattern)啥區別呢，答案，兩個區別。區別一：前者匹配的結果包含捕獲元，後者匹配的結果則不包含；區別二：前者匹配捕獲元時，消耗字符（索引），然後者不消耗。仍是來看一個例子：

var str ='ababa';
var pattern = /ab(?:a)/g;
var pat=  /ab(?=a)/g; 
var mat = pattern.exec(str);
var match = pat.exec(str);
console.log(mat);
console.log(match);       
 mat = pattern.exec(str); //全局模式，第二次匹配
 match = pat.exec(str); //全局模式，第二次匹配
console.log(mat);
console.log(match);

從上面代碼運行的截圖能夠看出區別一，也就是(?:pattern)的形式的捕獲元匹配的結果會保存在最終的結果中，而(?=pattern)；區別二看的不是很明顯，這時咱們須要依靠RegexBuddy，這個過程當中到底發生了什麼？看運行截圖，若是你夠仔細，你能夠發現區別，第一次匹配到結果，開始第二次匹配時，?:是從字符索引3開始,而?=是從2開始，這就是前面所說的消耗字符與不消耗字符。

好了，最後一個問題，整箱預查(?=pattern)與負向預查(?!pattern)，其實從中文單純來理解負向預查，是會帶來歧義的。這裏的負向其實單單就是正向預查的取反，即要匹配的字符不知足捕獲的條件，才能匹配到結果。
若是文章有什麼描述不正確或模糊的地方，還請及時指正。
好了，先就說這麼多嘛，雖然是無業遊民，那也應該有享受週末的權利吧，畢竟找工做的壓力那麼大，仍是要自我緩解一下，see you last week。