摘要:閱讀此篇文章前需要具備以下知識正則表達式的基本語法捕獲組是正則表達式里比較常用,也是比較重要的概念,我個人覺得掌握這部分的知識是非常重要的。我們知道的方法經常和正則表達式一起使用。
PS: 閱讀此篇文章前需要具備以下知識:
正則表達式的基本語法
String?.prototype?.replace()
String?.prototype?.match()
捕獲組(capturing group)是正則表達式里比較常用,也是比較重要的概念,我個人覺得掌握這部分的知識是非常重要的。
這篇文章內容不會很深入,但是盡量做到簡單易懂又全面。接下來的內容主要是圍繞以下7個點:
1: () 捕獲組
2: (?:) non capturing group
3: (?=) positive lookahead
4: (?!) negative lookahead
5: (?<=) positive lookbehind
6: (?7: (?=), (?!), (?<=), (?
1: () 捕獲組
/go+/
以上的正則表達式表示一個字母g后面跟上一個或者多個字母o,他能匹配go或者goooo。但是如果我們想+不只是運用到字母o上,而是運用到go這個整體上怎么辦呢?辦法就是給go加括號:
/(go)+/
為了全局匹配以及不考慮大小寫,我們接下來會給我們的正則加上ig,這兩個flag:
let reg = /(go)+/ig; "go is g gogo".match(reg); //["go", "gogo"]
在上面的例子里面(go)就形成了一個捕獲組(capturing group)。接下來看一個使用捕獲組的例子來加深對它的理解:
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就代表這第幾個捕獲組。
假如現在我們有一個需求:把顯示格式為 10.25.2017 的時間改為 2017-10-25 格式。
我們知道String的replace()方法經常和正則表達式一起使用。在replace()方法里,我們可以直接使用捕獲組的結果:
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: (?
負向就是與正向相反,那么負向后顧型捕獲就是:
/(?<=y)x/ 匹配x, 但是只在【前面】【沒有】y的情況下
來看一個例子:
let str = "1 turkey costs $2"; console.log( str.match(/(?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還不支持后顧型匹配,就是說(?<=), (?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104000.html
摘要:正則表達式語法字符與字符類特殊字符以上特殊字符要想使用字面值,必須使用進行轉義字符類包含在中的一個或者多個字符被稱為字符類,字符類在匹配時如果沒有指定量詞則只會匹配其中的一個。 1. 正則表達式語法 1.1 字符與字符類 1 特殊字符:.^$?+*{}| 以上特殊字符要想使用字面值,必須使用進行轉義 2 字符類 1. 包含在[]中的一個或者多個字符被稱為字符類,字符類在匹配時如果沒有指...
摘要:寫一個正則表達式來測試變量中是否包含字符串。用函數給出不使用字符,但和等價的正則表達式。第十四課標志全局匹配標志第二個常用的標志是全局匹配標志,用字母表示。寫出一個正則表達式來檢驗合法性。非捕獲組的主要用途是給一個組賦予量詞。 TRY REGEX 是一個交互式的正則表達式學習項目項目地址:https://github.com/callumacra...在線地址:http://tryre...
摘要:直接使用正則表達式對輸入的字符串進行匹配,匹配成功則返回使用正則表示式,進行字符串分割進行匹配操作,如果匹配成功,這三個方法都會返回其中,是在源字符串中找出和正則表達式匹配的字符串。 概念 正則表達式 在閱讀本文前,你應該已經了解了正則表達式的基本概念以及如何書寫正則表達式。如果對正則表達式不是太了解,或者想更深入地了解正則表示式,請點擊這里。 捕獲組 捕獲組能夠讓我們方便地從正則表達...
摘要:自從年推出標準第版以來,正則表達式已成為語言的一部分。最后,如果在正則表達式中使用了命名捕獲組,則將它們放在屬性中。支持與相同語法的命名組已經模仿了的正則表達式語法。下面是一個例子此正則表達式在句子中查找連續的重復單詞。 翻譯:瘋狂的技術宅原文:https://www.smashingmagazine.... 本文首發微信公眾號:jingchengyideng歡迎關注,每天都給你推...
閱讀 853·2021-11-24 09:38
閱讀 1085·2021-10-08 10:05
閱讀 2577·2021-09-10 11:21
閱讀 2800·2019-08-30 15:53
閱讀 1827·2019-08-30 15:52
閱讀 1964·2019-08-29 12:17
閱讀 3418·2019-08-29 11:21
閱讀 1609·2019-08-26 12:17