正則的擴展詳解

来源:https://www.cnblogs.com/wang-fan-w/archive/2023/02/20/17136895.html
-Advertisement-
Play Games

RegExp() 在es5中，RegExp的構造函數參數有兩種情況 1、字元串 2、正則表達式 // 第一種情況 let regex = new RegExp('abc', 'i') // 第二種情況 let regex2 = /abc/i 這兩種情況是等價的 let s = 'abc' regex ...


RegExp()

在es5中，RegExp的構造函數參數有兩種情況
1、字元串
2、正則表達式

// 第一種情況
let regex = new RegExp('abc', 'i')

// 第二種情況
let regex2 = /abc/i

這兩種情況是等價的

let s = 'abc'
regex.test(s) == regex2.test(s); // true

在es5中這兩種方式不能混用，如果第一個參數是一個正則，第二個是修飾會報錯
let regex3 = new RegExp(/abc/,'i') // 報錯

es6改變了這種行為，如果第一個是正則，第二個參數可以使用修飾符，並且返回的正則表達式會忽略原有的正則表達式修飾符，只使用新指定的修飾符。

let regex4 = new RegExp(/abc/ig, 'i')

在這裡，第二個參數i會把原有的正則修飾符ig覆蓋,最後的結果為/abc/i

u 修飾符

es6對正則表達式添加了u修飾符，表示為Unicode模式，用來處理大於\uFFFF的Unicode字元

/^\uD83D/u.test('\uD83D\uDC2A');  // false

這裡加上了u.所以變成了es6支持，將\uD83D\uDC2A轉譯為一個字元，與\uD83D不匹配，所以返回false

/^\uD83D/.test('\uD83D\uDC2A'); // true

這裡沒有加u.為es5支持，無法識別4個位元組的UTF-16編碼。會將\uD83D\uDC2A識別為兩個字元，比對的時候其中的字元匹配，所以返回true

點字元 .

點字元在正則表達式中，表示除了換行符以外的任意單個字元，但對於碼點大於0xFFFF的字元，點字元串無法識別，必須前面加上u修飾符

let z = '正'
/^.$/.test(z);   // true
/^.$/u.test(z);  // true

Unicode 字元表示法

es6新增了大括弧表示unicode字元，這種字元在正則中必須使用 u 修飾符才能識別，否則會被解讀為量詞，量詞是無法識別大於0xFFFF的unicode字元的。

/\u{61}/.test('a'); // false
/\u{61}/u.test('a'); // true

i 修飾符

i 修飾符為不區分大小寫，對於大於0xFFFF的unicode的修飾符，後面需要加上 u

/[a-z]/i.test('\u212A'); // false 
/[a-z]/iu.test('\u212A'); // true

y 修飾符

y修飾符，意為粘連（sticky）修飾符
在正則匹配中，g為全局匹配且沒有位置限制。
y在正則匹配中，有位置限制，必須在上一次匹配完後的下一個字元串的第一位開始匹配。

let a = 'aaa-aa-a'
let r = /a+/y
let r2 = /a+/g
// 第一次匹配
r.exec(a); // aaa
r2.exec(a); // aaa

// 第二次匹配
r.exec(a); // null  
r2.exec(a); // aa

y為粘連，上一次匹配完後的下一個字元串第一位，第一位是：-無法匹配上，解決的方法：其實只需要修改一下正則保證每次匹配上就行了 /a+-/y
g為全局匹配沒有位置限制

RegExp.prototype.sticky
來檢查是否設置了 y 修飾符

let a1 = /heelo\d/y
console.log(a1.sticky); // true

檢測正則表達式修飾符以及正文

  • source 返回正則匹配規則
  • flags 返回正則的修飾符
let rul = /abc/ig
console.log(rul.source); // abc
console.log(rul.flags); // ig

s 修飾符 ： dotAll模式

正則表達式中，點（.）是一個特殊的字元，代表任意字元，但是有兩種例外
第一種：四個位元組的UTF-16字元，這個使用 u 修飾符解決
第二種：行終止符，使用 s 修飾符解決

行終止符，就是該字元表示一行的終結，下麵四個字元屬於“行終止符”

  • U+000A 換行符（\n）
  • U+000D 回車符（\r）
  • U+2028 行分隔符（line separator）
  • U+2029 段分隔符（paragraph separator）
 let f = /foo.bar/.test('foo\nbar')
console.log(f); // false // 因為.不匹配 \n ,所以正則表達式返回false

// 解決方法 : s 修飾符
/* 使用s修飾符，可以使 . 匹配任意單個字元 */
let f2 = /foo.bar/s.test('foo\nbar')
console.log(f2); // true

這種s修飾符的模式被稱為dotAll模式，dot就是代表一切字元。
所以，正則表達式還引入了dotAll模式，檢查該表達式是否開啟了dotAll模式。

let f3 = /foo.bar/s
console.log(f3.dotAll); // true  // 開始了dotAll模式

先行斷言和後行斷言

先行斷言

先行斷言指的是，x在y的前面才匹配
語法：/x(?=y)/ x在y符號前才匹配

let look = '100% 東方不敗'
/\d+(?=%)/.exec(look); // 100  // 數字在百分號前面才匹配

let look2 = '100! 東方不敗'
console.log(/\d+(?=%)/.exec(look2));  // null 沒有匹配到%前的數字

後行斷言

與先行斷言相反，x在y的後面時才匹配
語法：/(?<=y)x/ 說明： ? 後面跟 <= 條件y

let look3 = '東方不敗 $100 西方求敗'
/(?<=\$)\d+/.exec(look3); // 100  表示在\$後的字元才會被匹配

註意 : 先行斷言和後行斷言的條件是不計入返回結果的

具名組匹配

正則表達式使用圓括弧進行組的匹配，每組圓括弧代表著一個匹配，匹配結果可以從組中提取出來

let rul = /(\d{4})-(\d{2})-(\d{2})/
let r = rul.exec('2022-12-13')
console.log(r[1]);  // 2022
console.log(r[2]);  // 12
console.log(r[3]);  // 13

雖然結果可以從組中提取出來，但它是通過下標提取的，如果組的順序發生改變，那麼下標也需要做對應更改，其實是不太方便的，對此es2018引入了"具名組匹配"，可以給組取別名，通過別名提取結果
語法：(?<別名>正則)

let rul2 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let r2 = rul2.exec('2022-12-13')
console.log(r2.groups.year);  // 2022
console.log(r2.groups.month);  // 12
console.log(r2.groups.day);  // 13
console.log(r2.groups.minute);  // undefined  如果沒有匹配，那麼對象屬性為undefined

解構賦值和替換

通過上面的具名組匹配，給組取別名後，在正則的groups中，匹配的屬性實際上是一個對象，通過解構賦值可以直接從匹配結果上為變數賦值。

. 可以匹配任意字元，查找單個字元，除了換行和行結束符。
n* 匹配任何包含零個或多個 n 的字元串。

解構：

let {groups : {hours,minute}} = /^(?<hours>.*):(?<minute>.*)/.exec('12:49')
console.log(hours,minute);  // 12  49  // 通過解構賦值提取

替換
字元串替換時，使用$<組名>進行替換

  • 將匹配的字元串位置替換
  • 不影響原正則表達式
let rul4 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u

console.log('2022-12-13'.replace(rul4,'$<day>/$<month>/$<year>')); // 13-12-2022

console.log(rul4);  // /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u

replace()的第二個參數可以是一個函數

let data = '2022-12-13'.replace(rul4,(matched,params1,param2,params3,position,sources,groups)=>{
        let {day,month,year} = groups;
        return `${day}/${month}/${year}`
       })
console.log(data);   // 13-12-2022

說明:

  • matched // '2022-12-13' 匹配結果
  • params1 // 第一個組匹配2022
  • param2 // 第一個組匹配12
  • params3 // 第一個組匹配13
  • position // 匹配開始的位置 0
  • sources // 原字元串 2022-12-13
  • groups // 具名組構成的一個對象

引用

如果要在正則表達式內部引用某個“具名組匹配”，可以使用 \k<組名> 的寫法

let str = /^(?<word>[a-z]+)!\k<word>$/
str.test('abc!abc');  // true  引用了具名匹配，前後都是abc,前後字元一致
str.test('abc!ab');   // false 引用了具名匹配，前後字元不匹配，但是第二個少一個c

其實可以這麼理解，引用就是將前面定義好的組，拿過來複用。

數字引用
首先需要明確分組的概念，即正則中的（）中的內容是一個分組，裡面的內容作為一個整體引用。如果在分組後面接上 \數字，表示匹配第幾個分組

let str2 = /^(\d{2})([a-z]+)\1$/
console.log(str2.test('11abcd'));  // false 
console.log(str2.test('11aa11'));  // true

第一個輸出：問題出在結尾是英文，這裡結尾使用了\數字，1表示匹配第一個分組，第一個分組是必須是2個數字，這裡的結尾用的英文所以返回false
第二個輸出：true，其實這時的正則為/^(\d{2})([a-z]+)(\d{2})$/，\1引用了第一個組


具名匹配的引用和數字引用可以同時使用

let str3 = /^(?<word>[a-z]+)-(\d{2})-\k<word>-\2$/
str3.test('a-11-a-11'); // true
str3.test('a-11-a-aa'); // false

第一個輸出：這裡使用了引用以及數字引用
第二個輸出：false, 結尾通過數字引用後，應該為數字\d{2}

d 修飾符：正則匹配索引

es2022新增d修飾符，可以在exec()、match()的返回結果添加indices屬性，在該屬性上可以拿到匹配的開始位置和結束位置，下標從0開始

let text = 'abcdefg'
let te = /bc/d
let result = te.exec(text)

result.index;  // 1   拿到bc匹配的起始位置，下標為1
result.indices;  // [1,3]  拿到bc匹配的開始和結束位置的下一個字元的位置

非常重要！！！這裡需要註意的是，匹配的字元串開始位置是字元串的第一個值，匹配的結束位置，並不在返回結果中，正確來說，匹配的結束位置是匹配字元串的末尾的下一個位置，如果這一句不理解，下麵的內容將會很難理解

如果正則中包含組匹配，那麼indices屬性對應的數組就會包含多個成員，並且提供每個組的開始位置和結束位置

let text2 = 'abccdef'
let te2 = /bc+(de)/d
let result2 = te2.exec(text2)
console.log(result2.indices);  // [1,6][4,6]
  • 這裡的匹配並不是單個的匹配，而是整體，最外層的bc其實不參與單獨的匹配，而是放到bcde整體中，所以第一個數組列印的是1,6，b的下標為1，e的下一個字元的下標為6`
  • 組會單獨進行匹配，d的下標為4，e的下一個字元的下標為6

多個組匹配以及下標

let text3 = 'abccdefgh'
let te3 = /bc+(de(fg))/d
let result3 = te3.exec(text3)

result3.indices;  // [1,8][4,8][6,8]

匹配的順序：bcdefg、defg、fg，對應的列印結果[1,8][4,8][6,8]


如果正則表達式包含具名匹配，那麼indices.groups的屬性會是一個對象，可以從該對象獲取具名組匹配的開始位置和結束位置

let text4 = 'abcdefgh'
let te4 = /bc+(?<word>de)/d  // 具名組<word>
let result4 = te4.exec(text4)

result4.indices; // [1,5][3,5]
result4.indices.groups; // {word : [3,5]}

在這裡插入圖片描述
在這裡插入圖片描述

如果未匹配上則列印undefined

String.prototype.matchAll()

matchAll()可以一次性取出所有匹配，返回的是遍歷器（Iterator）而不是數組

let strings = 'test1test2test3';
let regex = /t(e)(st(\d?))/g;

for(let match of strings.matchAll(regex)){
   console.log(match);  // 返回所有匹配
  }

在這裡插入圖片描述

轉為數組的方法一

[...strings.matchAll(regex)]; // 返回所有匹配，結果為數組

轉為數組的方法二

Array.from(strings.matchAll(regex)); // 返回所有匹配，結果為數組

在這裡插入圖片描述

案例源碼：https://gitee.com/wang_fan_w/es6-science-institute

如果覺得這篇文章對你有幫助，歡迎點亮一下star喲


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 關於Dialog在全屏彈出會顯示狀態欄和導航欄的問題解決
    項目的奇葩需求，需要彈出Dialog不要顯示狀態欄和導航欄，記錄一下解決方法 原文地址：Android 關於Dialog在全屏彈出會顯示狀態欄和導航欄的問題解決 Stars-one的雜貨小窩 說明 Android的原生的Dialog有個問題，如果你的Activity設置為全屏的，然後顯示Dialog ...
  • 立即執行函數在前端國際化方案中的應用
    說起國際化，開發過跨區域網頁的小伙伴應該都遇到過。我們的網頁需要配置多套語言，方便用戶進行切換。 本文就以 React 為例，介紹其中一種實現方案，並學習一下其中的知識點。 一種國際化方案 方案是這樣的： 為多套語言創建對應的 object，並 export 出去 通過 js 立即執行函數，載入選定 ...
  • react 高效高質量搭建後臺系統 系列 —— 結尾
    其他章節請看： react 高效高質量搭建後臺系統 系列 尾篇 本篇主要介紹表單查詢、表單驗證、通知（WebSocket）、自動構建。最後附上 myspug 項目源碼。 項目最終效果： 表單查詢 需求：給角色管理頁面增加表格查詢功能，通過輸入角色名稱，點擊查詢，從後端檢索出相應的數據。 效果如下： ...
  • Vue學習隨筆（一）Vue的引入
    前言 以往零零散散使用過一些Vue的語法，最近才剛剛系統接觸Vue，現在是剛剛入門的狀態，故在這裡做一個記錄和梳理，歡迎大家一起學習交流，有錯誤的地方也歡迎大家指正。 正篇 夢開始的地方 在寫之前我想先在這裡貼出Vue的一個官方的（應該是）學習教學https://cn.vuejs.org/guide ...
  • 第120篇: DOM編程(常用操作、動態腳本、樣式及動態表格)
    好家伙，我回來了， 本篇為《JS高級程式設計》第十四章“DOM編程”學習筆記 1.DOM編程 我們知道DOM是HTML文檔的編程介面， 我們可以通過HTML代碼實現DOM操作， 也同樣能夠通過JavaScript實現DOM操作。 2.JS操作DOM 我們來簡單的舉個例子： 隨便開一個空白的html頁 ...
  • js獲取blob數據流中攜帶的msg消息
    問題：後端返回的失敗 blob 數據流， 前端如何捕獲展示 業務需求，需要後端控制文件下載頻率，用戶在短時間內不可以重覆下載文件，並返回消息提示 (剩餘 XX 秒)。前端需要把返回數據msg消息展示彈出 數據在瀏覽器的響應里可以看到 但是在列印的 res 中卻找不到對應的msg，也就沒有辦法將對應內 ...
  • 記錄--什麼時候會阻塞HTML文檔渲染過程？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 HTML頁面載入過程會發生什麼？因為瀏覽器網路拉取資源是多線程的，但是dom樹的操作都是在一個線程中的，所以網頁資源的解析、js載入、dom樹渲染都是一個線程執行，所以就會線程任務就會相互搶占，先來先執行。而當瀏覽器載入html文件時，會 ...
  • JavaScript數組的方法大全（最新）
    JavaScript數組方法大全 趁著有時間，總結了下數組所有的屬性和方法，記錄博客，便於後續使用 at() at方法，用於獲取數組中，對應索引位置的值，不能修改。 語法：array.at(count); 參數：count，數組的索引值 返回值：返回該索引在數組中對應的值，如果count大於等於數組 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類