DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript正則表達式的分組匹配詳解
JavaScript正則表達式的分組匹配詳解
編輯:JavaScript基礎知識     

分組

下面的正則表達式可以匹配kidkidkid:

/kidkidkid/

而另一種更優雅的寫法是:

/(kid){3}/

這裡由圓括號包裹的一個小整體稱為分組。

候選

一個分組中,可以有多個候選表達式,用|分隔:

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

這裡的|相當於“或”的意思。

捕獲與引用

被正則表達式匹配(捕獲)到的字符串會被暫存起來。其中,由分組捕獲的串會從1開始編號,於是我們可以引用這些串:

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引用了第一個被捕獲的串,$2是第二個,依次類推。

與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傳迭代函數,有時能優雅地解決一些問題。

將違禁詞轉換為等字數的星號是一個常見功能。比如文本是kid is a doubi,其中kid與doubi是違禁詞,那麼轉換後應該為*** 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)))/的嵌套分組,捕獲的順序是什麼?來試試:

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

規則是以左括號出現的順序進行捕獲。

反向引用

正則表達式裡也能進行引用,這稱為反向引用:

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引用了第一個被分組所捕獲的串,換言之,表達式是動態決定的。

注意,如果編號越界了,則會被當成普通的表達式:

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

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

分組的類型

分組有四種類型:

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

非捕獲型分組

有時候,我們只是想分個組,而沒有捕獲的需求,則可以使用非捕獲型分組,語法為左括號後緊跟?::

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

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

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

正向與反向前瞻型分組

就好像你站在原地,向前眺望:

正向前瞻型分組 - 你前方是什麼東西嗎?
負向前瞻型分組 - 你前方不是什麼東西嗎?
太拗口了,我喜歡稱之為肯定表達式與否定表達式。先舉個正向前瞻的例子:

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

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

kid is a 後面跟著什麼?如果是doubi才能匹配成功。

而負向前瞻則剛好相反:

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

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

如果前瞻型分組也不會捕獲值。那麼它與非捕獲型的區別是什麼?看例子:

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

可見,非捕獲型分組匹配到的串,仍會被外層的捕獲型分組捕獲到,但前瞻型卻不會。當你需要參考後面的值,又不想連它一起捕獲時,前瞻型分組就派上用場了。

最後,JS不支持後瞻型分組。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved