ES9的新特性之正則表達式RegExp詳解
簡介
正則表達式是我們做數據匹配的時候常用的一種工具,雖然正則表達式的語法並不復雜,但是如果多種語法組合起來會給人一種無從下手的感覺。
於是正則表達式成瞭程序員的噩夢。今天我們來看一下如何在ES9中玩轉正則表達式。
Numbered capture groups
我們知道正則表達式可以分組,分組是用括號來表示的,如果想要獲取到分組的值,那麼就叫做capture groups。
通常來說,我們是通過序號來訪問capture groups的,這叫做Numbered capture groups。
舉個例子:
const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/; const matchObj = RE_DATE.exec('1999-12-31'); const year = matchObj[1]; // 1999 const month = matchObj[2]; // 12 const day = matchObj[3]; // 31
上面的正則表達式要匹配年月日,然後通過exec方法,返回match的數組。這個數組存儲的是匹配的groups信息。
因為我們有三個括號,所以可以匹配三個group。然後通過1,2,3來訪問特定的group。
我們把上面的matchObj輸出看一下其中的內容:
[ '1999-12-31', '1999', '12', '31', index: 0, input: '1999-12-31', groups: undefined ]
可以看到matchObj是一個數組,index 0存儲的是要匹配的字符串。這裡我們看到matchObj還有一個groups是undefined,這個groups就是命名groups。
Named capture groups
上面講到瞭numbered capture groups是通過序列號來訪問到匹配的數據。但是匹配到的group是沒有名字的。
我們看下怎麼才能夠給這些groups起個名字:
const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/; const matchObj = RE_DATE.exec('1999-12-31'); const year = matchObj.groups.year; // 1999 const month = matchObj.groups.month; // 12 const day = matchObj.groups.day; // 31
看下matchObj的內容:
[ '1999-12-31', '1999', '12', '31', index: 0, input: '1999-12-31', groups: [Object: null prototype] { year: '1999', month: '12', day: '31' } ]
可以看到,這次多瞭groups的信息。
如果要匹配我們之前匹配過的group信息,則可以使用numbered groups的 \k 或者 named groups的 \k.
我們看一個例子:
const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/; RE_TWICE.test('abc!abc'); // true RE_TWICE.test('abc!ab'); // false
const RE_TWICE = /^(?<word>[a-z]+)!\1$/; RE_TWICE.test('abc!abc'); // true RE_TWICE.test('abc!ab'); // false
兩種語法都可以使用。
Named capture groups還可以和replace一起使用。
有瞭group name,我們可以直接在replace中使用group name來做引用:
const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/; console.log('1999-12-31'.replace(RE_DATE, '$<month>/$<day>/$<year>')); // 12/31/1999
replace的第二個參數還可以是一個函數,函數的參數就是我們group出來的一些內容:
const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/; console.log('1999-12-31'.replace( RE_DATE, (g0,y,m,d,offset,input, {year, month, day}) => // (A) month+'/'+day+'/'+year)); // 12/31/1999
上面的例子中,g0 = 1999-12-31 表示匹配的子字符串。 y, m, d 匹配的是numbered groups 1,2,3。
input 是整個的輸入。{year, month, day} 匹配的是named groups。
RegExp中Unicode屬性的轉義
在Unicode標準中,每一個字符都有屬性,簡單點說屬性就是用來描述這個字符的。
比如說General_Category表示的是字符的分類: x: General_Category = Lowercase_Letter
White_Space表示的是空格,tabs和換行: \t: White_Space = True
Age表示的是該字符什麼時候被加入到Unicode中等等。
這些屬性還有對應的縮寫: Lowercase_Letter = Ll , Currency_Symbol = Sc 等等。
舉個例子,比如說我們想匹配空格。傳統做法是這樣做的:
> /^\s+$/.test('\t \n\r') true
前面是正則表達式,然後使用一個test方法來匹配字符串,最終得到的true。
剛剛講到瞭unicode的屬性,我們也可以用屬性來匹配:
> /^\p{White_Space}+$/u.test('\t \n\r') true
屬性匹配使用的是\p
, 後面跟的是屬性值。
註意,我們還要在正則表達式後面加上u,以表示使用的是Unicode屬性轉義。
lookaround assertion
lookaround assertion可以被翻譯為環視斷言,它是正則表達式中的一種結構,用來判斷要匹配的對象的前後環境是什麼樣的。
有兩種lookaround assertion,一種是Lookahead一種是Lookbehind。
我們先看一下Lookahead的使用:
const RE_AS_BS = /aa(?=bb)/; const match1 = RE_AS_BS.exec('aabb'); console.log(match1[0]); // 'aa' const match2 = RE_AS_BS.exec('aab'); console.log(match2); // null
lookahead就是向前查看,上面我們使用的是(?=bb)
來向前匹配bb。
註意,雖然正則表達式匹配上瞭aabb,但是match中並不包含bb。
結果是第一個匹配上瞭,第二個沒有匹配。
除瞭是用?=
之外,我們還可以使用?!
表示不等:
> const RE_AS_NO_BS = /aa(?!bb)/; > RE_AS_NO_BS.test('aabb') false > RE_AS_NO_BS.test('aab') true > RE_AS_NO_BS.test('aac') true
再來看一下Lookbehind的使用。
Lookbehind和Lookahead查詢的方向剛剛相反。
向後匹配是使用?<=
來表示的,我們來看一個例子:
const RE_DOLLAR_PREFIX = /(?<=\$)foo/g; '$foo %foo foo'.replace(RE_DOLLAR_PREFIX, 'bar'); // '$bar %foo foo'
上面的例子中,我們匹配瞭最前面的$,然後使用bar替換掉瞭foo。
同樣的,我們也可以使用?<!
來表示非相等的情況:
const RE_NO_DOLLAR_PREFIX = /(?<!\$)foo/g; '$foo %foo foo'.replace(RE_NO_DOLLAR_PREFIX, 'bar'); // '$foo %bar bar'
dotAll flag
正常情況下dot . 代表的是一個字符,但是這個字符不能夠代表行的結束符:
> /^.$/.test('\n') false
而dotAll是在 dot . 匹配後面引入的s, 它可以被用來匹配行的結束符:
> /^.$/s.test('\n') true
在ES中,有下面幾種字符表示的都是行的結束符:
- U+000A LINE FEED (LF) (\n)
- U+000D CARRIAGE RETURN (CR) (\r)
- U+2028 LINE SEPARATOR
- U+2029 PARAGRAPH SEPARATOR
總結
到此這篇關於ES9的新特性之正則表達式RegExp詳解的文章就介紹到這瞭,更多相關ES9正則表達式RegExp內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- None Found