欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript正則表達式中分組詳解

 更新時間:2016年07月17日 19:01:06   作者:wubetter  
這篇文章主要介紹了javascript正則表達式中分組的相關資料,包括捕獲性分組和非捕獲性分組,需要的朋友可以參考下

之前寫了一篇關于正則新手入門的文章,本以為對正則表達式相對比較了解 但是今天我又遇到了一個坑,可能是自己不夠細心的原因吧,今天就著重和大家分享一下javascript正則表達式中的分組。如果你對JS正則表達式不夠理解 可以點擊這里了解更多。

分組在正則中用的還是比較廣的,我所理解的分組 就是一對括號() ,每一對括號 就代表了一個分組,

分組可以分為:

  1. 捕獲性分組
  2. 非捕獲性分組
  3. 捕獲性分組

捕獲性分組會在 比如 match exec這樣的函數(shù)中以第二項,第三項的形式得到相應分組的結果。先來看一個例子吧

 var reg = /test(\d+)/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "001", index: 4, input: "new test001 test002"]

代碼中 (\d+)是一個分組(有些人也叫他子模式),但是表示的都是同一個意思,上面的例子中 test001是完全匹配的結果,
然而 分組的匹配是從整個完全匹配結果(也就是test001)中來查找與子模式\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)+ ,整個匹配結果還是 test001 但是第一個分組匹配的結果卻不同。

咱們慢慢來分析他們的區(qū)別

(\d+) 這整個是一個分組的情況,由于 默認情況下 匹配模式都是貪婪模式 也就是說盡可能多的去匹配
所有\(zhòng)d+ 匹配到的結果 是 001 然后 外面添加了一對括號 也就是一個分組,這樣第一個分組中匹配的結果就是 001.

再來看第二個例子中的 (\d)+ 同樣這也是一個貪婪模式 首先會先匹配0然后后面是0 也會匹配到 最后是1 同樣也匹配到 到此 匹配結束

看起來跟第一個例子中的匹配沒什么區(qū)別,但是這里的 分組(\d)表示 匹配單個數(shù)字,

按照我之前的理解是 會匹配最開始匹配到的結果 也就是0 但這種理解是錯誤的。由于整個匹配是貪婪模式,盡可能多的去匹配

分組中的 (\d) 就會捕獲 最后一次匹配到的結果 1

如果是非貪婪模式 那就會盡可能少的去匹配

 var reg = /test(\d)+?/;
 var str = 'new test001 test002';
 console.log(str.match(reg));

//["test001", "0", index: 4, input: "new test001 test002"]

這樣(\d)匹配結果就是0了,雖然后面還有能夠匹配到的結果,但是這里是盡可能少的去匹配

非捕獲性分組

 var reg = /test(?:\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", index: 4, input: "new test001 test002"]

非捕獲性分組也就是 有些地方需要用到一對括號,但是又不想讓他成為一個捕獲性分組也就是不想讓這個分組被類似 macth exec 這樣的函數(shù)所獲取到

通常在括號內(nèi)部的前面加上?: 也就是 (?:pattern)這樣就變成了一個非捕獲性分組,

這樣 match的結果中就不會出現(xiàn)分組匹配到的內(nèi)容了 也就是少了 第二項的 1.

這篇文章著重說明 (\d+)和 (\d)+的區(qū)別,也是我今天踩到的坑,若有錯誤之處,歡迎指正。

相關文章

  • js實現(xiàn)圓形菜單選擇器

    js實現(xiàn)圓形菜單選擇器

    這篇文章主要為大家詳細介紹了js實現(xiàn)圓形菜單選擇器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • 精通JavaScript的this關鍵字

    精通JavaScript的this關鍵字

    這篇文章主要介紹了JavaScript的this關鍵字,真正幫助大家做到精通this關鍵字,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-02-02
  • 詳解webpack中的hash、chunkhash、contenthash區(qū)別

    詳解webpack中的hash、chunkhash、contenthash區(qū)別

    這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別,詳細的介紹了hash、chunkhash、contenthash的用法和區(qū)別,有興趣的可以了解一下
    2018-01-01
  • JavaScript實現(xiàn)列表分頁功能特效

    JavaScript實現(xiàn)列表分頁功能特效

    最近在做一個小項目,有時需要制作靜態(tài)頁面網(wǎng)站,而一旦涉及到文章的分頁,實現(xiàn)起來非常麻煩,自己又剛入門,對js不是很熟悉,所以就拿來練練手。
    2015-05-05
  • JavaScript中事件流冒泡的原理與實現(xiàn)

    JavaScript中事件流冒泡的原理與實現(xiàn)

    在JavaScript中,事件流冒泡是一種非常重要的概念,它是指事件從最內(nèi)層的元素開始,逐級向外傳播到最外層元素的過程,下面我們就來了解下JavaScript中事件流冒泡的原理與實現(xiàn)吧
    2023-11-11
  • 基于JS代碼實現(xiàn)實時顯示系統(tǒng)時間

    基于JS代碼實現(xiàn)實時顯示系統(tǒng)時間

    這篇文章主要介紹了基于JS代碼實現(xiàn)實時顯示系統(tǒng)時間的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • Webpack學習之動態(tài)import原理及源碼分析

    Webpack學習之動態(tài)import原理及源碼分析

    這篇文章主要為大家介紹了Webpack學習之動態(tài)import原理及源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • javascript實現(xiàn)table表格隔行變色的方法

    javascript實現(xiàn)table表格隔行變色的方法

    這篇文章主要介紹了javascript實現(xiàn)table表格隔行變色的方法,涉及javascript針對表格元素與樣式的操作技巧,需要的朋友可以參考下
    2015-05-05
  • 深入認識javascript中的eval函數(shù)

    深入認識javascript中的eval函數(shù)

    發(fā)現(xiàn)為本文起一個合適的標題還不是那么容易,呵呵,所以在此先說明下本文的兩個目的.
    2009-11-11
  • 對存在JavaScript隱式類型轉換的四種情況的總結(必看篇)

    對存在JavaScript隱式類型轉換的四種情況的總結(必看篇)

    下面小編就為大家?guī)硪黄獙Υ嬖贘avaScript隱式類型轉換的四種情況的總結(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08

最新評論