js正則表達(dá)式之前瞻后顧與非捕獲分組
前瞻后顧與捕獲分組的結(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實現(xiàn)數(shù)組對象轉(zhuǎn)換為鍵值對的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對象的數(shù)組轉(zhuǎn)換為鍵值對形式的四種方法,并從實現(xiàn)方式的簡潔性、可讀性和性能角度進行了分析比較,感興趣的朋友可以參考下2024-02-02
EXT中單擊button按鈕grid添加一行(光標(biāo)位置可設(shè)置)的實例代碼
這篇文章主要介紹了EXT中單擊button按鈕grid添加一行(光標(biāo)位置可設(shè)置)的實例代碼 的相關(guān)資料,需要的朋友可以參考下2016-06-06
三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情
這篇文章主要介紹了三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下2022-08-08
layui動態(tài)渲染生成左側(cè)3級菜單的方法(根據(jù)后臺返回數(shù)據(jù))
今天小編就為大家分享一篇layui動態(tài)渲染生成左側(cè)3級菜單的方法(根據(jù)后臺返回數(shù)據(jù)),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
這篇文章主要介紹了原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼,可實現(xiàn)簡單的鼠標(biāo)滑過tab切換的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
JavaScript?Echarts柱狀圖label優(yōu)化中問題針對講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12

