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

js正則表達(dá)式之前瞻后顧與非捕獲分組

 更新時間:2021年10月14日 14:40:15   作者:zhuyinqinying  
話說自從學(xué)前端以來聽到過多次這樣的"笑話",程序員分為會正則的和不會正則的,可見正則的重要性,這篇文章主要給大家介紹了關(guān)于js正則表達(dá)式之前瞻后顧與非捕獲分組的相關(guān)資料,需要的朋友可以參考下

前瞻后顧與捕獲分組的結(jié)合使用

在現(xiàn)實的應(yīng)用場景中,捕獲分組或非捕獲分組通常被限制在前瞻后顧條件內(nèi),舉例來說,對數(shù)字12345678格式化,結(jié)果為12,345,678。其正則實現(xiàn)如下:

let formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

捕獲分組與非捕獲分組

為了理解前瞻與后顧,首先要先理解捕獲分組與非捕獲分組

在js中,

()表示捕獲分組,() 會把每個分組里的匹配的值保存起來,使用$n(n是一個數(shù)字,表示第n個捕獲組的內(nèi)容);

(?:)表示非捕獲分組,和捕獲分組唯一的區(qū)別在于,非捕獲分組匹配的值不會保存起來。

以formatSum 表達(dá)式為例,(?=(?:\d{3})+(?!\d)) ,(?:\d{3}) ,(?!\d) 都是分組,其中第二個分組是非捕獲分組。

前瞻、后顧與負(fù)前瞻、負(fù)后顧

在上述的formatSum表達(dá)式中,用到了 ‘?=‘與'?!',這就是所謂的前瞻與負(fù)前瞻了。為了方便理解,我們以一個簡單的例子入手。

// 前瞻:
A(?=B)   //查找B前面的A
// 后顧:
(?<=B)A   //查找B后面的A
// 負(fù)前瞻:
A(?!B)   //查找后面不是B的A
// 負(fù)后顧:
(?<!B)A   //查找前面不是B的A

回看formatSum表達(dá)式,將 (?:\d{3})+(?!\d) 視為一個整體表達(dá)式 A,即

formatSum = /\B(?=A)/g  //此處A為表示式并非真正字母A,只為方便理解

其意思是匹配表達(dá)式A前面的 \B ,而 \B 匹配的是非字母邊界,所以可以看出該表達(dá)式整體的作用是用來匹配并替換表達(dá)式 A 前邊的邊界的。

與 \B 對應(yīng)的還有 \b ,其匹配字母邊界。對于初學(xué)者來說,邊界的概念比較難以理解,你可以把它看作是無形的 | ,任何長度大于等于2的字符串中都存在邊界。如 ‘a(chǎn)b',它可以看作是'a|b', 只是此處 | 是無形的,當(dāng)然它也就不計入字符串長度。

'ab'.replace(/\B/, ',')
//  a,b

接下來為了看表達(dá)式 A 部分: (?:\d{3})+(?!\d) 。

首先 ?: 表示非捕獲分組,\d{3} 表示3位數(shù)字,則 (?:\d{3})+ 表示3、6、9、12…位數(shù)字;

(?!\d) 為負(fù)前瞻,表示匹配后面不是數(shù)字的 (?:\d{3})+ 。綜上:

(?:\d{3})+(?!\d)  

匹配'12345678'中后面不是數(shù)字的3*n(n=1遞增)位數(shù)字,即'678', '345678'

所以,得出結(jié)果:

formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

匹配'12345678'中后面不是數(shù)字的3*n(n=1,n++)位數(shù)字前面的非字母邊界,
即'678', '345678'前面的非字母邊界,最終將這兩個邊界替換為逗號,
即 '3' 與 '6' 前加逗號

'12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')  === '12,345,678'
// true

總結(jié)

到此這篇關(guān)于js正則表達(dá)式之前瞻后顧與非捕獲分組的文章就介紹到這了,更多相關(guān)js正則前瞻后顧與非捕獲分組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 一句話JavaScript表單驗證代碼

    一句話JavaScript表單驗證代碼

    純屬技術(shù)交流,在實際應(yīng)用中不建議那么做。建議js加載比較好。
    2009-08-08
  • 值得分享的Bootstrap Table使用教程

    值得分享的Bootstrap Table使用教程

    一套值得分享和大家收藏的Bootstrap學(xué)習(xí)教程,完整的知識體系,系統(tǒng)的學(xué)習(xí)資料,幫助大家開啟Bootstrap Table學(xué)習(xí)之旅,享受學(xué)習(xí)的樂趣
    2016-11-11
  • 一文了解JavaScript閉包函數(shù)

    一文了解JavaScript閉包函數(shù)

    閉包是js的一個難點也是它的一個特色,是我們必須掌握的js高級特性,下面這篇文章主要給大家介紹了關(guān)于JavaScript閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • JavaScript 字符串連接性能優(yōu)化

    JavaScript 字符串連接性能優(yōu)化

    從多次測試結(jié)果看來,使用StringBuffer 可以節(jié)省50%以上的時間
    2008-12-12
  • Javascript call及apply應(yīng)用場景及實例

    Javascript call及apply應(yīng)用場景及實例

    這篇文章主要介紹了Javascript call及apply應(yīng)用場景及實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-08-08
  • JavaScript 操作鍵盤的Enter事件(鍵盤任何事件),兼容多瀏覽器

    JavaScript 操作鍵盤的Enter事件(鍵盤任何事件),兼容多瀏覽器

    JavaScript 操作鍵盤的Enter事件(鍵盤任何事件),支持各種瀏覽器,需要的朋友可以參考下。
    2010-10-10
  • 用原生js做個簡單的滑動效果的回到頂部

    用原生js做個簡單的滑動效果的回到頂部

    很多網(wǎng)頁在下方都會放置一個“返回頂部”按鈕,這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告,于是將返回頂部功能做成了滑動效果
    2014-10-10
  • ?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別

    ?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別

    在等于運算符中,如果比較的內(nèi)容包含對象類型數(shù)據(jù),則會涉及隱式轉(zhuǎn)換,那么就會調(diào)用toString()函數(shù)和valueOf()函數(shù),本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別,感興趣的可以了解一下
    2022-04-04
  • JS vs TS二分法博弈對比分析

    JS vs TS二分法博弈對比分析

    這篇文章主要介紹了JS vs TS二分法博弈對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2024-01-01
  • 原生js封裝無縫輪播功能

    原生js封裝無縫輪播功能

    這篇文章主要為大家詳細(xì)介紹了原生js封裝無縫輪播功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05

最新評論