雖然很多web開(kāi)發(fā)者在忽視正則表達(dá)式后,還可以順利工作,但在javascript中還存在一些問(wèn)題,如果不用正則表達(dá)式,是沒(méi)辦法進(jìn)行很好的解決的.

當(dāng)然,也許還有其他的方式能夠解決相同的問(wèn)題.但通常,用一句正確的正則表達(dá)式很有可能就可以省略半屏幕的代碼.

假設(shè)我們要驗(yàn)證一個(gè)字符串是否為格式正確的手機(jī)號(hào)碼.手機(jī)號(hào)碼開(kāi)頭都是1,然后后面都是數(shù)字,然后長(zhǎng)度都為11位
讓我們創(chuàng)建一個(gè)函數(shù),對(duì)一個(gè)輸入內(nèi)容進(jìn)行驗(yàn)證

function isPhoneNumber(candidate){
  if(typeof candidate !== "string" || candidate.length!=11){
    return false;   //過(guò)濾明顯不符合條件的輸入內(nèi)容
  }
  if(isNaN(candidate)){
    return false;  //過(guò)濾非純數(shù)字的輸入內(nèi)容
  }
  return true;
}

雖然這段代碼實(shí)現(xiàn)的很合理,檢查了輸入內(nèi)容的類(lèi)型和長(zhǎng)度,但是對(duì)于一個(gè)簡(jiǎn)單的手機(jī)號(hào)碼檢查,看起來(lái)依然有太多的代碼
現(xiàn)在考慮這樣一種方式

function isPhoneNumber(candidate){
  return /^1[0-9]{10}$/.test(candidate)
}

除了函數(shù)體內(nèi)的一些深?yuàn)W的語(yǔ)法以外,這種方式看起來(lái)更簡(jiǎn)潔,更優(yōu)雅,不是嗎?
這就是正則表達(dá)式的威力,而且這只是它冰山的一角.如果語(yǔ)法看起來(lái)像鍵盤(pán)上爬行的蜥蜴的話(huà),也不要擔(dān)心.

讓我們開(kāi)始對(duì)正則表達(dá)式進(jìn)行深挖,要學(xué)習(xí)正則表達(dá)式,就先了解正則表達(dá)式出現(xiàn)的由來(lái)

"正則表達(dá)式(regular expression)" 這個(gè)詞源于中世紀(jì)的數(shù)學(xué),當(dāng)時(shí),一個(gè)名叫Stephen Kleene的數(shù)學(xué)家,使用了一個(gè)名為"正則集合"的數(shù)學(xué)符號(hào)描述自動(dòng)計(jì)算模式.但這不會(huì)幫助我們了解任何關(guān)于正則表達(dá)式的內(nèi)容,那么讓我們把它簡(jiǎn)單化,正則表達(dá)式通常被稱(chēng)為一個(gè)模式(pattern),是一個(gè)用簡(jiǎn)單方式描述或者匹配一系列符合某個(gè)語(yǔ)法規(guī)則的字符串.表達(dá)式本身包含了允許定義這些模式的術(shù)語(yǔ)和操作符.我們很快就會(huì)看到這些術(shù)語(yǔ)和操作符.

在 javascript 中,與大多數(shù)其他對(duì)象類(lèi)型一樣,有兩種方式可以創(chuàng)建正則表達(dá)式:通過(guò)正則表達(dá)式字面量,或者通過(guò)構(gòu)造 RegExp 對(duì)象的實(shí)例.

例如,如果要?jiǎng)?chuàng)建一個(gè)正則表達(dá)式 (或簡(jiǎn)稱(chēng)為正則(regex)),用于精確匹配字符串 "test" ,可以使用正則字面量:

var pattern = /test/;

正斜杠可能看起來(lái)有點(diǎn)奇怪,但是就像字符串使用引號(hào)進(jìn)行界定的一樣,正則字面量是用正斜杠進(jìn)行界定的.

或者,我們可以構(gòu)造一個(gè) RegExp 實(shí)例,將正則作為字符串傳入:

var pattern = new RexExp("test");

這兩種格式在pattern變量中創(chuàng)建的正則表達(dá)式都是一樣的.

在開(kāi)發(fā)過(guò)程中,如果正則是已知的,則優(yōu)先選擇字面量語(yǔ)法,而構(gòu)造器方式則是用于在運(yùn)行時(shí),通過(guò)動(dòng)態(tài)創(chuàng)建字符串來(lái)構(gòu)建正則表達(dá)式.

字面量語(yǔ)法優(yōu)先于用字符串構(gòu)建正則表達(dá)式的其中一個(gè)原因是反斜杠字符在正則表達(dá)式中發(fā)揮重要的作用(很快就能看到).但由于反斜杠字符在普通字符串中也是一個(gè)轉(zhuǎn)義字符,所以,如果要在字符串內(nèi)表示反斜杠,我們就要使用 (兩個(gè)反斜杠).這回讓本來(lái)語(yǔ)法就很神秘的正則表達(dá)式變得更加怪異了.

除了表達(dá)本身,還有三個(gè)標(biāo)志可以與正則表達(dá)式進(jìn)行關(guān)聯(lián).

i 讓正則表達(dá)式不區(qū)分大小寫(xiě),所以/test/i不僅可以匹配 "test" ,還可以匹配 "Test" "TEST" "tEsT" 等.

g 匹配模式中的所有實(shí)例,而不是默認(rèn)的只匹配第一次出現(xiàn)的結(jié)果

m 允許匹配多個(gè)行,比如可以匹配文本區(qū)元素(textarea)中的字

這些標(biāo)志將附加到字面量尾部(例如: /test/ig) 或者作為 RegExp 構(gòu)造器的第二個(gè)字符參數(shù) (new RegExp("test","ig")) .

例子:

需要注意的是String對(duì)象也有個(gè)match方法,也可以檢索目標(biāo)字符串,用法和RegExp的exec方法類(lèi)似,區(qū)別是

exec是正則表達(dá)式的方法，而不是字符串的方法，它的參數(shù)才是字符串

exec和match返回的都是數(shù)組,但是match是返回所有匹配的字符串合成的數(shù)組，但是正則表達(dá)式必須指定全局g屬性才能返回所有匹配，不指定g屬性則會(huì)返回一個(gè)只有一個(gè)元素的數(shù)組。exec永遠(yuǎn)返回與第一個(gè)匹配相關(guān)的信息，其返回?cái)?shù)組包括第一個(gè)匹配的字串，所有分組的反向引用。

參考資料:http://www.jb51.net/article/46374.htm

?

正則表達(dá)式,就像我們熟悉的大多數(shù)其他表達(dá)式一樣,由術(shù)語(yǔ)和驗(yàn)證這些術(shù)語(yǔ)的操作符組成.在接下來(lái)的小節(jié)中,我們將了解這些術(shù)語(yǔ)和操作符,看看它們是如何用于表達(dá)模式的.

如果一個(gè)字符不是特殊字符或操作符(后續(xù)會(huì)進(jìn)行介紹),則表示該字符必須在表達(dá)式中出現(xiàn).例如,在/test/正則中,有4個(gè)術(shù)語(yǔ),它們表示這些字符必須在一個(gè)字符串中出現(xiàn),才能匹配該模式.

一個(gè)接一個(gè)的字符,隱式表達(dá)了"后面跟著(followed by)"這樣一個(gè)操作.所以,/test/的意思是說(shuō), "t" 后面跟著 "e","e" 后面跟著 "s","s" 后面又跟著 "t".

很多時(shí)候,我們并不像匹配一個(gè)特定的字符,而是想匹配一個(gè)有限字符集中的某一個(gè)字符.我們可以通過(guò)將字符集放到中括號(hào)內(nèi),來(lái)指定該字符集操作符(也被稱(chēng)為字符類(lèi)(character class)操作符): [abc]

上述示例,是說(shuō)我們要匹配 "a" "b" "c" 中的任何一個(gè)字符.

有的時(shí)候,我們想要匹配一組有限字符集以外的字符.可以通過(guò)在中括號(hào)第一個(gè)開(kāi)括號(hào)后面加一個(gè)插入符(^)來(lái)實(shí)現(xiàn),比如:

[^abc]

其意義將改變?yōu)?除了 "a" "b" 或 "c" 以外的任意字符.

在字符集操作方面,還有一個(gè)更加重要的變異操作: 指定一個(gè)范圍. 例如,如果要匹配 "a" 和 "m" 之間的任何一個(gè)小寫(xiě)字母,我們可以這樣寫(xiě): [abcdefghijklm]但可以寫(xiě)成更加簡(jiǎn)潔的 [a-m]

中橫線(xiàn)表示從 "a" 到 "m" 之間的所有字符 (包含 a 和 m,按字典順序)都在該字符集內(nèi).

并不是所有的字符和其字符字面量都是等價(jià)的.當(dāng)然,所有的字母和十進(jìn)制數(shù)字字符都能代表自己,但是,我們很快就會(huì)發(fā)現(xiàn).像$ 和點(diǎn)(.) 這樣的特殊字符,表示的是他們自身以外的東西,或者表示為驗(yàn)證術(shù)語(yǔ)的操作符. 事實(shí)上,我們已經(jīng)看到了如何用[、]、-、^ 字符表示它們自身以外的東西

如果我們需要匹配[、]、$、^或其他這樣的特殊字符,該怎么辦?在正則里,使用反斜杠可以對(duì)任意字符進(jìn)行轉(zhuǎn)義,讓被轉(zhuǎn)義字符作為字符本身進(jìn)行匹配.所以,[表示要匹配[字符.兩個(gè)反斜杠()則匹配一個(gè)反斜杠

我們可能經(jīng)常需要確保模式匹配一個(gè)字符串的開(kāi)始,或者一個(gè)字符串的結(jié)束.插入符號(hào)(^),如果作為正則表達(dá)式的第一個(gè)字符,則表示要從字符串的開(kāi)頭進(jìn)行匹配,這樣/^test/就只能匹配以 "test" 開(kāi)頭的字符串了.(注意,這只是&字符的一個(gè)重載,它還可以用于否定一個(gè)字符類(lèi)集,比如 /[^abc]/ 用于選擇除了除了 "a" "b" 或 "c" 以外的任意字符)

類(lèi)似的,美元符號(hào)$表示該模式必須出現(xiàn)在字符串的結(jié)尾:/test$/.

同時(shí)使用^和$則表明指定的模式必須包含整個(gè)候選字符串.

如果要匹配連續(xù)的4個(gè) "a" 字符,可以用/aaaa/來(lái)表示,但如果我們想匹配任意數(shù)量的相同字符串呢?

在重復(fù)選項(xiàng)上,正則表達(dá)式提供了很多方式.

在一個(gè)字符后面加一個(gè)問(wèn)號(hào)( ? ),可以定義為該字符是可選的(也就是,可以出現(xiàn)一次,或根本不出現(xiàn))

如果一個(gè)字符要出現(xiàn)一次或多次,可以使用加號(hào)(+),例如/t+est/可以匹配"test","ttest","tttest",而不能匹配"est"

如果一個(gè)字符要出現(xiàn)零次或多次,可以使用星號(hào)( * ),例如/t*est/可以匹配"test","ttest","tttest",以及"est"

也可以在字符后面的花括號(hào)里指定一個(gè)數(shù)字來(lái)表示重復(fù)次數(shù),例如,/a{4}/表示匹配含有連續(xù)四個(gè)"a"字符的字符串

也可以在字符后面的花括號(hào)里指定兩個(gè)數(shù)字(用逗號(hào)隔開(kāi))來(lái)表示重復(fù)次數(shù)區(qū)間,例如,/a{4,10}/表示匹配任何含有連續(xù)4個(gè)至10個(gè) "a" 字符的字符串.

次數(shù)區(qū)間的第二個(gè)值是可選的(但是要保留逗號(hào)),其表示一個(gè)開(kāi)區(qū)間.例如,/a{4,}/表示匹配任何含有連續(xù)4個(gè)或多于4個(gè) "a" 字符的字符串.

這些重復(fù)操作符可以是貪婪的(greedy)或非貪婪的(nongreedy).默認(rèn)情況下,它們是貪婪的:它們匹配所有的字符組合.在操作符后面加一個(gè)問(wèn)號(hào)?字符(?操作符的一個(gè)重載),如 a+?,可以讓該表達(dá)式變成非貪婪的:進(jìn)行最小限度的匹配

舉個(gè)例子,如果我們對(duì)字符串 "aaa" 進(jìn)行匹配,正則表達(dá)式 /a+/將匹配所有這三個(gè)字符,而非貪婪表達(dá)式/a+?/ 則只匹配一個(gè) "a" 字符,因?yàn)橐粋€(gè)a字符就可以符合a+術(shù)語(yǔ).

有一些我們想匹配的字符,是不可能用字面量字符來(lái)表示的(如像回車(chē)的控制字符),還有一些我們可能經(jīng)常想匹配的字符類(lèi),比如小數(shù)位數(shù)或一組空白字符.正則表達(dá)式語(yǔ)法提供了很多表示這些字符或常用類(lèi)的預(yù)定義術(shù)語(yǔ),這樣在正則表達(dá)式中,我們就可以使用這些控制字符進(jìn)行匹配了,因此,我們不需要再去依靠常用的字符集.

下面列出了這些術(shù)語(yǔ)以及它們表示的字符或字符集.

這些預(yù)定義集,讓正則表達(dá)式看起來(lái)不那么過(guò)于神秘了.

到目前為止,我們看到的操作符(如+和*)只能影響前面的術(shù)語(yǔ).如果將操作符應(yīng)用于一組術(shù)語(yǔ),可以像數(shù)學(xué)表達(dá)式一樣在該組上使用小括號(hào).例如,/(ab)+/匹配一個(gè)或多個(gè)連續(xù)出現(xiàn)的字字符串 "ab".

當(dāng)正則表達(dá)式有一部分使用括號(hào)進(jìn)行分組時(shí),它具有雙重責(zé)任,同時(shí)也創(chuàng)建所謂的捕獲(capture).正則表達(dá)式有很多捕獲,我們將在下面對(duì)其進(jìn)行更深入的討論.

可以用豎線(xiàn)(|)字符表示或者的關(guān)系.例如:/a|b/匹配 "a" 或 "b" 字符,/(ab)+|(cd)+/ 則匹配出現(xiàn)一次或多次的 "ab" 或 "cd".

正則表達(dá)式中最復(fù)雜的術(shù)語(yǔ)是在正則中所定義的捕獲(captures)的反向引用,我們將在后面幾節(jié)花很大篇幅來(lái)介紹捕獲方面的內(nèi)容,但現(xiàn)在就將捕獲作為正則表達(dá)式中能夠成功匹配術(shù)語(yǔ)時(shí)的候選字符串.

這種術(shù)語(yǔ)表示法是在反斜杠后面加一個(gè)要引用的捕獲數(shù)量,該數(shù)字從1開(kāi)始,如1,2等

舉例來(lái)說(shuō),/^([dtn])a1/表示可以任意一個(gè)以 "d" "t" "n" 開(kāi)頭,且后面跟著一個(gè) a 字符,并且后面跟著的是和第一個(gè)捕獲相同字符的字符串.后面這一點(diǎn)很重要! 它和/^[dtn]a[dtn]/不一樣,因?yàn)閍后面跟著的雖然也是"d" "t" "n" 中的一個(gè),但可能和開(kāi)頭字符不同,例如:在全局模式下,有兩個(gè)字符串"dad" 和 "dat" /^([dtn])a1/會(huì)選中 "dad",而不會(huì)選中 "dat",

/^[dtn]a[dtn]/ 既選中 "dad",也會(huì)選中 "dat"

要匹配像 " whatever" 這樣的元素,不適用反向引用,是無(wú)法做到的,因?yàn)槲覀儫o(wú)法知道關(guān)閉標(biāo)簽和開(kāi)始標(biāo)簽是否匹配.

例如:/<(w+).+/g就可以選中正常閉合的簡(jiǎn)單標(biāo)簽

正則在線(xiàn)測(cè)試

在上面的代碼中,我們使用1引用了表達(dá)式中的第一個(gè)捕獲,在本例中,該捕獲是標(biāo)簽名稱(chēng)

還有一個(gè)方法可以獲取捕捉的引用,那就是通過(guò)調(diào)用String對(duì)象的replace()方法替換字符串.在這里,我們使用$1 $2 $3 語(yǔ)法表示每個(gè)捕獲的數(shù)字.

例子:

var pattern=/([A-Z])/g;
var str="fontFamily";
console.log(str.replace(pattern,"-$1").toLowerCase()); //font-family

在上面的代碼中,首先獲取的捕獲值(在本例中是大寫(xiě)字母F),在替換字符串中進(jìn)行了引用(通過(guò)$1).這種方式允許我們制定一個(gè)替換字符串,即便是在運(yùn)行之前還不知道它的值.這是個(gè)強(qiáng)大的武器.

這種可以引用正則表達(dá)式捕捉結(jié)果的能力,讓很多本來(lái)很復(fù)雜困難的代碼變得相當(dāng)簡(jiǎn)單.其富有表現(xiàn)力的特性,將本來(lái)可能很遲鈍,復(fù)雜且冗長(zhǎng)的代碼,最終變成了一些簡(jiǎn)短的語(yǔ)句.

有時(shí)候我們需要在一個(gè)字符串里找到特定的數(shù)據(jù),比如需要在爬蟲(chóng)爬到的數(shù)據(jù)里找到特定的數(shù)據(jù),比如天氣溫度,用戶(hù)id,特定標(biāo)簽里面的內(nèi)容.拿在特定標(biāo)簽里找里面的內(nèi)容來(lái)舉例,用正則匹配的話(huà)我們通常會(huì)先找到這個(gè)標(biāo)簽,比如<(strong).+,這樣就能匹配到整個(gè)strong標(biāo)簽和strong標(biāo)簽里面的內(nèi)容了,

我們找到了strong標(biāo)簽和它里面的內(nèi)容,那么又怎么找到strong標(biāo)簽里面的test呢?

其實(shí),只需要給"".+""加個(gè)括號(hào)就行

于是我們看到匹配內(nèi)容多了個(gè)test

由于返回的匹配是個(gè)數(shù)組,所以我們只需要用數(shù)組下標(biāo)就能取到test這個(gè)值

為什么加個(gè)括號(hào)就能取到test了呢 ?

我們前面已經(jīng)知道了小括號(hào)具有雙重責(zé)任,不僅可以用來(lái)分組,還會(huì)創(chuàng)建所謂的 "捕獲" .

因此,使用小括號(hào)指定一個(gè)子表達(dá)式后，匹配這個(gè)子表達(dá)式的文本(也就是此分組捕獲的內(nèi)容)可以在表達(dá)式或其它程序中作進(jìn)一步的處理。

既然小括號(hào)既有分組的作用,又有捕獲的作用,如果我們只想分組,又不想捕獲怎么辦呢?

思考一下如下的正則表達(dá)式:

var pattern=/((good-)+)man/;

在單詞 "man" 前面,允許前綴 "good" 出現(xiàn)一次或多次,并且希望捕獲整個(gè)前綴.這個(gè)正則表達(dá)式需要兩層括號(hào)

定義捕獲(man 之前的所有字符串)的小括號(hào)

針對(duì)+操作符,對(duì) "good-" 文本進(jìn)行分組的小括號(hào)

一切運(yùn)行正常,但由于括號(hào)分組的功能,不僅是單一目標(biāo)捕獲

要讓一組括號(hào)不進(jìn)行結(jié)果捕獲,正則表達(dá)式的語(yǔ)法允許我們?cè)陂_(kāi)始括號(hào)后加一個(gè) ?: 標(biāo)記.這就是所謂的 被動(dòng)表達(dá)式

將我們的正則表達(dá)式修改成如下這樣:

var pattern=/((?:good-)+)man/;

該表達(dá)式只會(huì)為外層的括號(hào)創(chuàng)建捕獲.內(nèi)層括號(hào)被轉(zhuǎn)換為一個(gè)被動(dòng)子表達(dá)式

String的replace()方法是一個(gè)強(qiáng)大且靈活的方法,將正則表達(dá)式作為replace()方法的第一個(gè)參數(shù)時(shí),導(dǎo)致在該模式的匹配元素(全局匹配的話(huà),就是多個(gè)匹配元素)上進(jìn)行替換,而不是在固定字符串上進(jìn)行替換.

舉個(gè)例子,假如需要讓所有的大寫(xiě)字符串都替換成"X",我們可以這樣編寫(xiě):

"ABCEDfg".replace(/[A-Z]/g,"X")

其結(jié)果為 "XXXXXfg". 很不錯(cuò).

不過(guò),獲取replace()最強(qiáng)大的特性是可以接受一個(gè)函數(shù)作為替換值,而不是一個(gè)固定的字符串.

當(dāng)替換值(第二個(gè)參數(shù))是一個(gè)函數(shù)時(shí),每個(gè)匹配都會(huì)調(diào)用該函數(shù)(記住,全局搜索會(huì)在源字符串中匹配所有的模式實(shí)例)并帶有一串參數(shù)列表.

匹配的完整文本.

匹配到捕獲,一個(gè)捕獲對(duì)應(yīng)一個(gè)參數(shù)

匹配字符在源字符串中的索引

源字符串

函數(shù)的返回值是即將要替換掉值.

這給了我們很多思考的余地,讓我們?cè)谶\(yùn)行時(shí)確定應(yīng)該替換的字符串,并掌握大量與匹配特性有關(guān)的信息.

例如,在下面的代碼中,我們使用一個(gè)函數(shù),動(dòng)態(tài)地將中橫線(xiàn)分割的字符轉(zhuǎn)換成等價(jià)的駝峰拼寫(xiě)字符.

function upper(all,letter){
    return letter.toUpperCase();
}
var pattern=/-(w)(w)/g;
var str="border-bottom-width";
console.log(str.replace(pattern,upper)); //borderBttomWdth

在這里,我們提供了一個(gè)正則表達(dá)式,用于匹配中橫線(xiàn)字符后的任意一個(gè)字符.全局正則中的捕獲結(jié)果就是該匹配的字符(不包括之中橫線(xiàn)).函數(shù)在每次被調(diào)用的時(shí)候(本例中是兩次),傳入匹配的完整的字符串作為第一個(gè)參數(shù),捕獲結(jié)果(本例只有一個(gè))作為第二個(gè)參數(shù).我們對(duì)其他參數(shù)不感興趣,所以沒(méi)有指定他們.

函數(shù)在第一次被調(diào)用的時(shí)候,傳入了 "-b" 和 "b" ,第二次被調(diào)用的時(shí)候傳入的是 "-w" 和 "w",在本例中,將捕獲字符轉(zhuǎn)換成大寫(xiě),并作為替換值返回.最終,我們將 "-b" 替換成了 "B",將 "-w" 替換成了 "W"

將字符串前后多余的空格進(jìn)行刪除是一種常見(jiàn)的需求,但String對(duì)象卻沒(méi)有這種功能(最近才有).對(duì)于沒(méi)有String.trim()方法的舊版瀏覽器,幾乎所有的JavaScript庫(kù)都提供了一種實(shí)現(xiàn).

最常用的實(shí)現(xiàn),類(lèi)似如下代碼:

function trim(str){
  return (str||"").replace(/^s+|s+$/g,"");
}
console.log(trim(" #id div.class ")==="#id div.class"); //true

參考資料:知道這 20 個(gè)正則表達(dá)式，能讓你少寫(xiě) 1000 行代碼