javascript正則表達(dá)式中分組詳解
之前寫(xiě)了一篇關(guān)于正則新手入門的文章,本以為對(duì)正則表達(dá)式相對(duì)比較了解 但是今天我又遇到了一個(gè)坑,可能是自己不夠細(xì)心的原因吧,今天就著重和大家分享一下javascript正則表達(dá)式中的分組。如果你對(duì)JS正則表達(dá)式不夠理解 可以點(diǎn)擊這里了解更多。
分組在正則中用的還是比較廣的,我所理解的分組 就是一對(duì)括號(hào)() ,每一對(duì)括號(hào) 就代表了一個(gè)分組,
分組可以分為:
- 捕獲性分組
- 非捕獲性分組
- 捕獲性分組
捕獲性分組會(huì)在 比如 match exec這樣的函數(shù)中以第二項(xiàng),第三項(xiàng)的形式得到相應(yīng)分組的結(jié)果。先來(lái)看一個(gè)例子吧
var reg = /test(\d+)/; var str = 'new test001 test002'; console.log(str.match(reg)); //["test001", "001", index: 4, input: "new test001 test002"]
代碼中 (\d+)是一個(gè)分組(有些人也叫他子模式),但是表示的都是同一個(gè)意思,上面的例子中 test001是完全匹配的結(jié)果,
然而 分組的匹配是從整個(gè)完全匹配結(jié)果(也就是test001)中來(lái)查找與子模式\d+匹配的字符,這里顯然是 001.
但是今天遇到的情況是這樣的
var reg = /test(\d)+/; var str = 'new test001 test002'; console.log(str.match(reg)); //["test001", "1", index: 4, input: "new test001 test002"]
不同之處就是 (\d+) 改為了 (\d)+ ,整個(gè)匹配結(jié)果還是 test001 但是第一個(gè)分組匹配的結(jié)果卻不同。
咱們慢慢來(lái)分析他們的區(qū)別
(\d+) 這整個(gè)是一個(gè)分組的情況,由于 默認(rèn)情況下 匹配模式都是貪婪模式 也就是說(shuō)盡可能多的去匹配
所有\(zhòng)d+ 匹配到的結(jié)果 是 001 然后 外面添加了一對(duì)括號(hào) 也就是一個(gè)分組,這樣第一個(gè)分組中匹配的結(jié)果就是 001.
再來(lái)看第二個(gè)例子中的 (\d)+ 同樣這也是一個(gè)貪婪模式 首先會(huì)先匹配0然后后面是0 也會(huì)匹配到 最后是1 同樣也匹配到 到此 匹配結(jié)束
看起來(lái)跟第一個(gè)例子中的匹配沒(méi)什么區(qū)別,但是這里的 分組(\d)表示 匹配單個(gè)數(shù)字,
按照我之前的理解是 會(huì)匹配最開(kāi)始匹配到的結(jié)果 也就是0 但這種理解是錯(cuò)誤的。由于整個(gè)匹配是貪婪模式,盡可能多的去匹配
分組中的 (\d) 就會(huì)捕獲 最后一次匹配到的結(jié)果 1
如果是非貪婪模式 那就會(huì)盡可能少的去匹配
var reg = /test(\d)+?/; var str = 'new test001 test002'; console.log(str.match(reg)); //["test001", "0", index: 4, input: "new test001 test002"]
這樣(\d)匹配結(jié)果就是0了,雖然后面還有能夠匹配到的結(jié)果,但是這里是盡可能少的去匹配
非捕獲性分組
var reg = /test(?:\d)+/; var str = 'new test001 test002'; console.log(str.match(reg)); //["test001", index: 4, input: "new test001 test002"]
非捕獲性分組也就是 有些地方需要用到一對(duì)括號(hào),但是又不想讓他成為一個(gè)捕獲性分組也就是不想讓這個(gè)分組被類似 macth exec 這樣的函數(shù)所獲取到
通常在括號(hào)內(nèi)部的前面加上?: 也就是 (?:pattern)這樣就變成了一個(gè)非捕獲性分組,
這樣 match的結(jié)果中就不會(huì)出現(xiàn)分組匹配到的內(nèi)容了 也就是少了 第二項(xiàng)的 1.
這篇文章著重說(shuō)明 (\d+)和 (\d)+的區(qū)別,也是我今天踩到的坑,若有錯(cuò)誤之處,歡迎指正。
相關(guān)文章
詳解webpack中的hash、chunkhash、contenthash區(qū)別
這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別,詳細(xì)的介紹了hash、chunkhash、contenthash的用法和區(qū)別,有興趣的可以了解一下2018-01-01JavaScript實(shí)現(xiàn)列表分頁(yè)功能特效
最近在做一個(gè)小項(xiàng)目,有時(shí)需要制作靜態(tài)頁(yè)面網(wǎng)站,而一旦涉及到文章的分頁(yè),實(shí)現(xiàn)起來(lái)非常麻煩,自己又剛?cè)腴T,對(duì)js不是很熟悉,所以就拿來(lái)練練手。2015-05-05JavaScript中事件流冒泡的原理與實(shí)現(xiàn)
在JavaScript中,事件流冒泡是一種非常重要的概念,它是指事件從最內(nèi)層的元素開(kāi)始,逐級(jí)向外傳播到最外層元素的過(guò)程,下面我們就來(lái)了解下JavaScript中事件流冒泡的原理與實(shí)現(xiàn)吧2023-11-11基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06Webpack學(xué)習(xí)之動(dòng)態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學(xué)習(xí)之動(dòng)態(tài)import原理及源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04javascript實(shí)現(xiàn)table表格隔行變色的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)table表格隔行變色的方法,涉及javascript針對(duì)表格元素與樣式的操作技巧,需要的朋友可以參考下2015-05-05深入認(rèn)識(shí)javascript中的eval函數(shù)
發(fā)現(xiàn)為本文起一個(gè)合適的標(biāo)題還不是那么容易,呵呵,所以在此先說(shuō)明下本文的兩個(gè)目的.2009-11-11對(duì)存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇對(duì)存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08