ES9的新特性之正則表達式RegExp詳解

簡介

正則表達式是我們做數(shù)據(jù)匹配的時候常用的一種工具，雖然正則表達式的語法并不復(fù)雜，但是如果多種語法組合起來會給人一種無從下手的感覺。

于是正則表達式成了程序員的噩夢。今天我們來看一下如何在ES9中玩轉(zhuǎn)正則表達式。

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的數(shù)組。這個數(shù)組存儲的是匹配的groups信息。

因為我們有三個括號，所以可以匹配三個group。然后通過1，2，3來訪問特定的group。

我們把上面的matchObj輸出看一下其中的內(nèi)容：

[
 '1999-12-31',
 '1999',
 '12',
 '31',
 index: 0,
 input: '1999-12-31',
 groups: undefined
]

可以看到matchObj是一個數(shù)組，index 0存儲的是要匹配的字符串。這里我們看到matchObj還有一個groups是undefined，這個groups就是命名groups。

Named capture groups

上面講到了numbered capture groups是通過序列號來訪問到匹配的數(shù)據(jù)。但是匹配到的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的內(nèi)容：

[
 '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]+)!\kword>$/;
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的第二個參數(shù)還可以是一個函數(shù)，函數(shù)的參數(shù)就是我們group出來的一些內(nèi)容：

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屬性的轉(zhuǎn)義

在Unicode標(biāo)準(zhǔn)中，每一個字符都有屬性，簡單點說屬性就是用來描述這個字符的。

比如說General_Category表示的是字符的分類： x: General_Category = Lowercase_Letter

White_Space表示的是空格，tabs和換行： \t: White_Space = True

Age表示的是該字符什么時候被加入到Unicode中等等。

這些屬性還有對應(yīng)的縮寫： Lowercase_Letter = Ll ， Currency_Symbol = Sc 等等。

舉個例子，比如說我們想匹配空格。傳統(tǒng)做法是這樣做的：

> /^\s+$/.test('\t \n\r')
true

前面是正則表達式，然后使用一個test方法來匹配字符串，最終得到的true。

剛剛講到了unicode的屬性，我們也可以用屬性來匹配：

> /^\p{White_Space}+$/u.test('\t \n\r')
true

屬性匹配使用的是\p, 后面跟的是屬性值。

注意，我們還要在正則表達式后面加上u，以表示使用的是Unicode屬性轉(zhuǎn)義。

lookaround assertion

lookaround assertion可以被翻譯為環(huán)視斷言，它是正則表達式中的一種結(jié)構(gòu)，用來判斷要匹配的對象的前后環(huán)境是什么樣的。

有兩種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。

結(jié)果是第一個匹配上了，第二個沒有匹配。

除了是用?= 之外，我們還可以使用?! 表示不等：

> 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 . 代表的是一個字符，但是這個字符不能夠代表行的結(jié)束符：

> /^.$/.test('\n')
false

而dotAll是在 dot . 匹配后面引入的s, 它可以被用來匹配行的結(jié)束符：

> /^.$/s.test('\n')
true

在ES中，有下面幾種字符表示的都是行的結(jié)束符：

• U+000A LINE FEED (LF) (\n)
• U+000D CARRIAGE RETURN (CR) (\r)
• U+2028 LINE SEPARATOR
• U+2029 PARAGRAPH SEPARATOR

 總結(jié)

到此這篇關(guān)于ES9的新特性之正則表達式RegExp詳解的文章就介紹到這了,更多相關(guān)ES9正則表達式RegExp內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！