快捷導(dǎo)航

JavaScript正則表達(dá)式的分組匹配詳解

更新時(shí)間：2016年02月13日 09:25:16 投稿：hebedich

本文給大家詳細(xì)介紹了JavaScript正則表達(dá)式的分組匹配的概念以及具體的使用方法并附上了相關(guān)示例，有需要的小伙伴可以參考下。

分組

下面的正則表達(dá)式可以匹配kidkidkid：

/kidkidkid/

而另一種更優(yōu)雅的寫法是：

/(kid){3}/

這里由圓括號(hào)包裹的一個(gè)小整體稱為分組。

候選

一個(gè)分組中，可以有多個(gè)候選表達(dá)式，用|分隔：

var reg = /I love (him|her|it)/;

reg.test('I love him')  // true 
reg.test('I love her')  // true
reg.test('I love it')  // true
reg.test('I love them') // false

這里的|相當(dāng)于“或”的意思。

捕獲與引用

被正則表達(dá)式匹配（捕獲）到的字符串會(huì)被暫存起來(lái)。其中，由分組捕獲的串會(huì)從1開始編號(hào)，于是我們可以引用這些串：

var reg = /(\d{4})-(\d{2})-(\d{2})/
var date = '2010-04-12'
reg.test(date)

RegExp.$1 // 2010
RegExp.$2 // 04
RegExp.$3 // 12

$1引用了第一個(gè)被捕獲的串，$2是第二個(gè)，依次類推。

與replace配合

String.prototype.replace方法的傳參中可以直接引用被捕獲的串。比如我們想將日期12.21/2012改為2012-12-21：

var reg = /(\d{2}).(\d{2})\/(\d{4})/
var date = '12.21/2012'

date = date.replace(reg, '$3-$1-$2') // date = 2012-12-21

順道一提，給replace傳迭代函數(shù)，有時(shí)能優(yōu)雅地解決一些問(wèn)題。

將違禁詞轉(zhuǎn)換為等字?jǐn)?shù)的星號(hào)是一個(gè)常見(jiàn)功能。比如文本是kid is a doubi，其中kid與doubi是違禁詞，那么轉(zhuǎn)換后應(yīng)該為*** is a *****。我們可以這么寫：

var reg = /(kid|doubi)/g
var str = 'kid is a doubi'

str = str.replace(reg, function(word){
  return word.replace(/./g, '*')
})

嵌套分組的捕獲

如果碰到類似/((kid) is (a (doubi)))/的嵌套分組，捕獲的順序是什么？來(lái)試試：

var reg = /((kid) is (a (doubi)))/
var str = "kid is a doubi"

reg.test( str ) // true

RegExp.$1 // kid is a doubi
RegExp.$2 // kid
RegExp.$3 // a doubi
RegExp.$4 // doubi

規(guī)則是以左括號(hào)出現(xiàn)的順序進(jìn)行捕獲。

反向引用

正則表達(dá)式里也能進(jìn)行引用，這稱為反向引用：

var reg = /(\w{3}) is \1/

reg.test('kid is kid') // true
reg.test('dik is dik') // true
reg.test('kid is dik') // false
reg.test('dik is kid') // false

\1引用了第一個(gè)被分組所捕獲的串，換言之，表達(dá)式是動(dòng)態(tài)決定的。

注意，如果編號(hào)越界了，則會(huì)被當(dāng)成普通的表達(dá)式：

var reg = /(\w{3}) is \6/;

reg.test( 'kid is kid' ); // false
reg.test( 'kid is \6' );  // true

分組的類型

分組有四種類型：

捕獲型　　　-　()
非捕獲型　　-　(?:)
正向前瞻型　-　(?=)
反向前瞻型　-　(?!)
我們之前說(shuō)的都是捕獲型分組，只有這種分組會(huì)暫存匹配到的串。

非捕獲型分組

有時(shí)候，我們只是想分個(gè)組，而沒(méi)有捕獲的需求，則可以使用非捕獲型分組，語(yǔ)法為左括號(hào)后緊跟?:：

var reg = /(?:\d{4})-(\d{2})-(\d{2})/
var date = '2012-12-21'
reg.test(date)

RegExp.$1 // 12
RegExp.$2 // 21

這個(gè)例子中，(?:\d{4})分組不會(huì)捕獲任何串，所以$1為(\d{2})捕獲的串。

正向與反向前瞻型分組

就好像你站在原地，向前眺望：

正向前瞻型分組 - 你前方是什么東西嗎？
負(fù)向前瞻型分組 - 你前方不是什么東西嗎？
太拗口了，我喜歡稱之為肯定表達(dá)式與否定表達(dá)式。先舉個(gè)正向前瞻的例子：

var reg = /kid is a (?=doubi)/

reg.test('kid is a doubi') // true
reg.test('kid is a shabi') // false

kid is a 后面跟著什么？如果是doubi才能匹配成功。

而負(fù)向前瞻則剛好相反：

var reg = /kid is a (?!doubi)/

reg.test('kid is a doubi') // false
reg.test('kid is a shabi') // true

如果前瞻型分組也不會(huì)捕獲值。那么它與非捕獲型的區(qū)別是什么？看例子：

var reg, str = "kid is a doubi"

reg = /(kid is a (?:doubi))/
reg.test(str)
RegExp.$1 // kid is a doubi

reg = /(kid is a (?=doubi))/
reg.test(str)
RegExp.$1 // kis is a

可見(jiàn)，非捕獲型分組匹配到的串，仍會(huì)被外層的捕獲型分組捕獲到，但前瞻型卻不會(huì)。當(dāng)你需要參考后面的值，又不想連它一起捕獲時(shí)，前瞻型分組就派上用場(chǎng)了。

最后，JS不支持后瞻型分組。

您可能感興趣的文章: