js正則表達(dá)式之前瞻后顧與非捕獲分組
前瞻后顧與捕獲分組的結(jié)合使用
在現(xiàn)實(shí)的應(yīng)用場(chǎng)景中，捕獲分組或非捕獲分組通常被限制在前瞻后顧條件內(nèi)，舉例來(lái)說(shuō)，對(duì)數(shù)字12345678格式化，結(jié)果為12,345,678。其正則實(shí)現(xiàn)如下：
let formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
捕獲分組與非捕獲分組
為了理解前瞻與后顧，首先要先理解捕獲分組與非捕獲分組
在js中，
()表示捕獲分組，() 會(huì)把每個(gè)分組里的匹配的值保存起來(lái)，使用$n(n是一個(gè)數(shù)字，表示第n個(gè)捕獲組的內(nèi)容)；
(?:)表示非捕獲分組，和捕獲分組唯一的區(qū)別在于，非捕獲分組匹配的值不會(huì)保存起來(lái)。
以formatSum 表達(dá)式為例，(?=(?:\d{3})+(?!\d)) ，(?:\d{3}) ，(?!\d) 都是分組，其中第二個(gè)分組是非捕獲分組。
前瞻、后顧與負(fù)前瞻、負(fù)后顧
在上述的formatSum表達(dá)式中，用到了 ‘?=‘與'?!'，這就是所謂的前瞻與負(fù)前瞻了。為了方便理解，我們以一個(gè)簡(jiǎn)單的例子入手。
// 前瞻： A(?=B) //查找B前面的A // 后顧： (?<=B)A //查找B后面的A // 負(fù)前瞻： A(?!B) //查找后面不是B的A // 負(fù)后顧： (?<!B)A //查找前面不是B的A
回看formatSum表達(dá)式，將 (?:\d{3})+(?!\d) 視為一個(gè)整體表達(dá)式 A，即
formatSum = /\B(?=A)/g //此處A為表示式并非真正字母A，只為方便理解
其意思是匹配表達(dá)式A前面的 \B ,而 \B 匹配的是非字母邊界，所以可以看出該表達(dá)式整體的作用是用來(lái)匹配并替換表達(dá)式 A 前邊的邊界的。
與 \B 對(duì)應(yīng)的還有 \b ，其匹配字母邊界。對(duì)于初學(xué)者來(lái)說(shuō)，邊界的概念比較難以理解，你可以把它看作是無(wú)形的 | ,任何長(zhǎng)度大于等于2的字符串中都存在邊界。如 ‘a(chǎn)b'，它可以看作是'a|b'， 只是此處 | 是無(wú)形的，當(dāng)然它也就不計(jì)入字符串長(zhǎng)度。
'ab'.replace(/\B/, ',') // a,b
接下來(lái)為了看表達(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'前面的非字母邊界，最終將這兩個(gè)邊界替換為逗號(hào)，
即 '3' 與 '6' 前加逗號(hào)
即
'12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',') === '12,345,678'
// true
總結(jié)
到此這篇關(guān)于js正則表達(dá)式之前瞻后顧與非捕獲分組的文章就介紹到這了,更多相關(guān)js正則前瞻后顧與非捕獲分組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果
這篇文章主要介紹了bootstrap實(shí)現(xiàn)每隔5秒自動(dòng)輪播效果，可以自己設(shè)置輪播間隔時(shí)間，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)數(shù)組對(duì)象轉(zhuǎn)換為鍵值對(duì)的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對(duì)象的數(shù)組轉(zhuǎn)換為鍵值對(duì)形式的四種方法,并從實(shí)現(xiàn)方式的簡(jiǎn)潔性、可讀性和性能角度進(jìn)行了分析比較,感興趣的朋友可以參考下2024-02-02
EXT中單擊button按鈕grid添加一行（光標(biāo)位置可設(shè)置)的實(shí)例代碼
這篇文章主要介紹了EXT中單擊button按鈕grid添加一行（光標(biāo)位置可設(shè)置)的實(shí)例代碼 的相關(guān)資料,需要的朋友可以參考下2016-06-06
三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情
這篇文章主要介紹了三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))
今天小編就為大家分享一篇layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
這篇文章主要介紹了原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過(guò)tab切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
在使用原生框架開(kāi)發(fā)小程序時(shí)遇到一個(gè)問(wèn)題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-08-08
基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫，文中的示例代碼講解詳細(xì)，對(duì)我們了解Cesium有一定的幫助，感興趣的可以嘗試一下2022-06-06
JavaScript?Echarts柱狀圖label優(yōu)化中問(wèn)題針對(duì)講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12
在很多網(wǎng)頁(yè)上可以看到，點(diǎn)擊網(wǎng)頁(yè)的某個(gè)地方能夠彈出一個(gè)新窗口，并且可以在屏幕中隨意拖動(dòng)，通過(guò)此篇文章給大家介紹javascript彈出拖動(dòng)窗口，有需要的朋友可以參考下2015-08-08