PS: 閱讀此篇文章前須要具有如下知識:html
捕獲組(capturing group)是正則表達式裏比較經常使用,也是比較重要的概念,我我的以爲掌握這部分的知識是很是重要的。
這篇文章內容不會很深刻,可是儘可能作到簡單易懂又全面。接下來的內容主要是圍繞如下7個點:java
1: () 捕獲組
2: (?:) non capturing group
3: (?=) positive lookahead
4: (?!) negative lookahead
5: (?<=) positive lookbehind
6: (?<!) negative lookbehind
7: (?=), (?!), (?<=), (?<!)的捕獲web
1: () 捕獲組正則表達式
/go+/
以上的正則表達式表示一個字母g後面跟上一個或者多個字母o,他能匹配go
或者goooo
。可是若是咱們想+不僅是運用到字母o上,而是運用到go這個總體上怎麼辦呢?辦法就是給go加括號:緩存
/(go)+/
爲了全局匹配以及不考慮大小寫,咱們接下來會給咱們的正則加上ig,這兩個flag:app
let reg = /(go)+/ig; 'go is g gogo'.match(reg); //["go", "gogo"]
在上面的例子裏面(go)就造成了一個捕獲組(capturing group)。接下來看一個使用捕獲組的例子來加深對它的理解:this
let reg = /(\d{2}).(\d{2}).(\d{4})/; let originString = '10.25.2017'; reg.test(originString); //true RegExp.$1; //10 RegExp.$2; //25 RegExp.$2; //2017
在上面這個例子裏,咱們有三組括號,造成了三個捕獲組,正則表達式(在javaScript裏就是咱們的RegExp)會緩存捕獲組所匹配的串,以$n
表示,n就表明這第幾個捕獲組。prototype
假如如今咱們有一個需求:把顯示格式爲 10.25.2017 的時間改成 2017-10-25 格式。code
咱們知道String的replace()方法常常和正則表達式一塊兒使用。在replace()方法裏,咱們能夠直接使用捕獲組的結果:regexp
let reg = /(\d{2}).(\d{2}).(\d{4})/; let originString = '10.25.2017'; let newString = originString.replace(reg, '$3-$1-$2'); console.log(newString);//"2017-10-25"
2: (?:) non capturing group 非捕獲型分組
有的時候咱們可能只想匹配分組,可是並不想緩存(不想捕獲)匹配到的結果,就能夠在咱們的分組模式前面加上?:
。例如上面的時間的例子,咱們不想捕獲第一個分組的結果,就能夠這麼作:
let reg = /(?:\d{2}).(\d{2}).(\d{4})/; let originString = '10.25.2017'; reg.test(originString); //true RegExp.$1; //25 RegExp.$2; //2017 originString.match(reg);// ["10.25.2017", "25", "2017", index: 0, input: "10.25.2017", groups: undefined]
從上面的例子能夠看出,咱們的正則表達式依然是匹配的(test()的結果依然爲true),可是RegExp.$1不是數字10,而是25,由於咱們在第一個括號里加了?:
,10就不會被捕獲。match()的執行結果也會受?:
的影響:match()的結果裏再也不有‘10’。
3: (?=) positive lookahead 正向前瞻型捕獲
有一個句子:1 apple costs 10€. 咱們想要匹配€前面的價格(這裏是一個數字),可是注意不能匹配到句子開頭的數字1。這種狀況,就能夠用到正向前瞻型捕獲:
let reg = /\d+(?=€)/g; let reg1 = /\d+/g; let str = '1 apple costs 10€'; str.match(reg); //["10"] str.match(reg1); //["1", "10"]
上面的例子裏面reg1就只須要匹配數字,對於數字後面跟什麼並無要求,因此它能匹配到1,10。可是reg使用了前瞻型匹配,就只能匹配到10。
或許你已經能從上面的對比裏瞭解到什麼是正向前瞻型捕獲了,意思是:
/x(?=y)/ 匹配x, 可是必須在x的【後面】【是】y的狀況下
4: (?!) negative lookahead 負向前瞻型捕獲
上面咱們瞭解了什麼是正向前瞻型匹配,從字面意思也能猜出來負向前瞻型捕獲就是:
/x(?!y)/ 匹配x, 可是必須在x的【後面】【不是】y的狀況下
例以下面的例子,咱們要匹配數字1,而不要€前面的2,就能夠用到?!
:
let reg = /\d+(?!€)/g; let str = '1 apple costs 2€'; str.match(reg); ['1']
5: (?<=) positive lookbehind 正向後顧型捕獲
後顧型和前瞻型正好相反,意思就是:
/(?<=y)x/ 匹配x, 可是隻在【前面】【有】y的狀況下
來看一個例子:
let str = "1 turkey costs $2"; console.log( str.match(/(?<=\$)\d+/g) ); //["2"]
這裏的要求是前面有$的數字,因此這裏匹配到了數字2,而沒有1.
6: (?<!) negative lookbehind 負向後顧型捕獲
負向就是與正向相反,那麼負向後顧型捕獲就是:
/(?<=y)x/ 匹配x, 可是隻在【前面】【沒有】y的狀況下
來看一個例子:
let str = "1 turkey costs $2"; console.log( str.match(/(?<!\$)\d+/g) ); //['1']
7: (?=), (?!), (?<=), (?<!)的捕獲
默認狀況下上面的前瞻後顧4種都是默認不匹配捕獲組裏面的內容的,也就是不匹配括號裏的條件的。例如咱們的正向前瞻/d+(?=€)/g,只會匹配到數字,並不會匹配到€。若是咱們想要也匹配到€怎麼辦呢?答案就是給€也包上一個括號:
let str = "1 turkey costs 2€"; let reg = /\d+(?=(€))/; str.match(reg); //["2", "€", index: 15, input: "1 turkey costs 2€", groups: undefined]
這樣就匹配到了數字2和它後面的€。
下面再來看看後顧型:
let str = "1 turkey costs $2"; let reg = /(?<=(\$|£))\d+/; console.log( str.match(reg) ); //["2", "$", index: 16, input: "1 turkey costs $2", groups: undefined]
須要特別注意到的一點是,對於後顧型,雖然條件在匹配項的前面,可是匹配出來的結果順序依然是條件在匹配項的後面。因此這裏match()出來的結果是2在$的前面。
PS:截止到目前爲止(ES2015),JavaScript還不支持後顧型匹配,就是說(?<=), (?<!)這兩種是不支持的。若是你在webStorm裏面使用可能會獲得error:look-behind groups are not supported in this regex dialect。好消息是ES2018已經對其進行了支持,能夠參考:http://2ality.com/2017/05/reg...