在前端開(kāi)發(fā)中，正則表達(dá)式是一大利器。所以我們這次就來(lái)討論下match()方法。

　　match本身是JavaScript語(yǔ)言中字符串對(duì)象的一個(gè)方法，該方法的簽名是

　　match([string] | [RegExp])

　　它的參數(shù)既可以是一個(gè)字符串，也可以是一個(gè)正則表達(dá)式。該方法絕大多數(shù)都是要使用正則表達(dá)式的，所以參數(shù)為string的情況不在本文討論范圍之內(nèi)。其實(shí)參數(shù)即使是一個(gè)簡(jiǎn)單的string，其返回值也跟使用正則表達(dá)式的結(jié)果無(wú)異，而且使用正則表達(dá)式的變化比較多，用法復(fù)雜，所以我們只討論正則的用法。

　　一、返回值問(wèn)題。

　　我們必須明確的是，這個(gè)方法跟其他語(yǔ)言是不同的。JavaScript中的match()方法的返回值是數(shù)組或者是null。如果原字符串中匹配到了正則表達(dá)式指代的子串，則返回一個(gè)數(shù)組，否則返回null。

　　二、不使用全局匹配　　?

var str = 'Today is the 186th day of 2018,I must finish these 2 projects within 21 days.';
var results = str.match(/\d+/); //只能匹配字符串中出現(xiàn)的首個(gè)數(shù)字，未使用全局匹配符g
console.log(results);

?　　輸出的結(jié)果是：

　　再?gòu)?qiáng)調(diào)一次，這個(gè)例子的結(jié)果是沒(méi)有使用全局匹配的正則表達(dá)式的匹配結(jié)果。說(shuō)白了，就是正則表達(dá)式的末尾沒(méi)跟g。由于不適用全局匹配，所以match()方法只找到源字符串中首次匹配的子串后，就立刻得到返回結(jié)果，不再比較之后剩余的部分是否還有能匹配上的內(nèi)容?！?/p>

　　我們可以看到，match()的結(jié)果是一個(gè)數(shù)組，該數(shù)組一共有4項(xiàng)。各項(xiàng)代表的意思如下：

　　第0項(xiàng)：匹配到字符串

　　第1項(xiàng)：groups：undefined，這表示當(dāng)前的正則表達(dá)式?jīng)]使用分組

　　第2項(xiàng)：index表示首次匹配上的子串的起始下標(biāo)。

　　第3項(xiàng)：input，表示源字符串

　　第4項(xiàng)：length，表示匹配到的結(jié)果個(gè)數(shù)，由于這里不使用全局匹配，只找到首次匹配項(xiàng)就結(jié)束了，所以匹配結(jié)果只有1個(gè)，length也就是1。

　　再次強(qiáng)調(diào)下，如果在正則表達(dá)式末尾不使用全局匹配符g，在本例中是無(wú)法匹配到所有的數(shù)字。反過(guò)來(lái)說(shuō)就是，如果想匹配所有的符合條件的子串，就必須在正則的末尾添加全局匹配符g

 age: "{{integer(20, 40)}}",
reginteger = /{{integer\((\d+),\s*(\d+)\)}}/
matchs = age.match(reginteger);
console.log(matchs)

　　三、使用全局匹配　

var str = 'Today is the 186th day of 2018,I must finish these 2 projects within 21 days.';
var results = str.match(/\d+/g); //匹配所有的數(shù)字，使用了全局匹配符g
console.log(results);

　　這次我們?cè)谡齽t表達(dá)式的末尾添加了 g，該正則表達(dá)式的意圖是，在字符串str中匹配出所有的由數(shù)字組成的子符串。

　　這次結(jié)果如下：

　　可以看到，這次的返回值仍然是個(gè)數(shù)組，只不過(guò)這個(gè)數(shù)組的內(nèi)容跟上邊不使用全局匹配時(shí)大不相同的。由于原字符串中出現(xiàn)了4個(gè)數(shù)字組成的子串的情況，所以該數(shù)組中出現(xiàn)了4個(gè)項(xiàng)。length屬性同樣為匹配到的結(jié)果個(gè)數(shù)，這里顯然是4個(gè)。

　　仔細(xì)看會(huì)發(fā)現(xiàn)，此時(shí)返回的數(shù)組中，沒(méi)有index，input這2項(xiàng)，不過(guò)這兩項(xiàng)并不十分重要。

　　四、使用分組

　　使用分組時(shí)的情況比較麻煩，還要看有沒(méi)有使用全局匹配，也就是有沒(méi)有在正則表達(dá)式的末尾添加g

　　4.1 使用分組，且不使用g

var str = 'Today is the 286th day of 2018, the 108th Thanksgiving Day.';
var results = str.match(/\d+(th)/); //匹配str中首個(gè)以數(shù)字開(kāi)頭，并且以th結(jié)尾的子串
console.log(results);

　　輸出結(jié)果是：

　由于該正則表達(dá)式為： /\d (th) /，該表達(dá)式中使用了小括號(hào)（），在此處的作用為分組。所以match()的結(jié)果是帶有分組特征的。返回的數(shù)組包含多個(gè)元素，第一個(gè)元素是以貪婪模式找到的最長(zhǎng)的匹配，之后的元素依次為該匹配中的第一、第二、第三 ......個(gè)分組，這里只有1個(gè)分組，所以也就只匹配到1個(gè)分組結(jié)果，也就是”th"。

　　假如正則表達(dá)式改成：/\d+(t)(h)/，那么匹配到的項(xiàng)就有3個(gè)，分別是 ： '286th' 、 't' 、'h'。我相信大家看到這里，對(duì)于分組的意義，以及如何匹配分組就已經(jīng)了解了。

　　數(shù)組中其它項(xiàng)不在解釋了，參考上邊的?！?/p>

　　需要注意的是，這種結(jié)果是前提是：1.使用分組，2.不做全局匹配。

　　4.2 使用分組，同時(shí)使用全局匹配g

var str = 'Today is the 286th day of 2018, the 108th Thanksgiving Day.';
var results = str.match(/\d+(th)/g); //匹配str中所有的以數(shù)字開(kāi)頭，并且以th結(jié)尾的子串
console.log(results);

　這次的代碼，跟上次的代碼區(qū)別只有一點(diǎn)，就是正則表達(dá)式末尾多了個(gè)g，表示全局匹配。

　　結(jié)果也是大不相同的。

　　結(jié)果說(shuō)明了一切，當(dāng)正則中使用全局匹配符g，即使有分組的存在，在匹配結(jié)果中也只有匹配到的最長(zhǎng)的，那些分組的子匹配都不見(jiàn)了。

　　具體表現(xiàn)為：這次匹配到的結(jié)果是 ’286th‘ 和 ‘’108th’ ，前一個(gè)例子中使用分組是出線的那個(gè)單獨(dú)的分組子匹配? ‘th’，這一項(xiàng)不見(jiàn)了。我們把這個(gè)現(xiàn)象理解為，只要使用了全局匹配模式，那么match()將只返回“貪婪”的匹配結(jié)果，這里的“貪婪”指的就是只招那個(gè)最長(zhǎng)的能匹配上的字符串，至于分組項(xiàng)，就忽略了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-673206.html

到了這里，關(guān)于詳解正則表達(dá)式匹配方法 match()的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！