本文為學習筆記；

原文鏈接?<<<<轉載請注明原文出處！

RegExp 構造函數

在 ES5 中，RegExp構造函數的參數有兩種情況：

• 參數是字符串，這時第二個參數表示正則表達式的修飾符（flag）；

  var regex = new RegExp('xyz', 'i'); // 等價于 var regex = /xyz/i;

• 參數是一個正則表示式，這時會返回一個原有正則表達式的拷貝。

  var regex = new RegExp(/xyz/i); // 等價于 var regex = /xyz/i;

但是，ES5 不允許此時使用第二個參數添加修飾符，否則會報錯。

var regex = new RegExp(/xyz/, 'i'); // Uncaught TypeError: Cannot supply flags when constructing one RegExp from another

ES6 改變了這種行為。如果RegExp構造函數第一個參數是一個正則對象，那么可以使用第二個參數指定修飾符。而且，返回的正則表達式會忽略原有的正則表達式的修飾符，只使用新指定的修飾符。

new RegExp(/abc/ig, 'i').flags // "i" 上面代碼中，原有正則對象的修飾符是ig，它會被第二個參數i覆蓋。

字符串的正則方法

字符串對象共有 4 個方法，可以使用正則表達式：match()、replace()、search()和split()。

ES6 將這 4 個方法，在語言內部全部調用RegExp的實例方法，從而做到所有與正則相關的方法，全都定義在RegExp對象上:

• String.prototype.match 調用 RegExp.prototype[Symbol.match]
• String.prototype.replace 調用 RegExp.prototype[Symbol.replace]
• String.prototype.search 調用 RegExp.prototype[Symbol.search]
• String.prototype.split 調用 RegExp.prototype[Symbol.split]

u 修飾符

ES6 對正則表達式添加了u修飾符，含義為“Unicode 模式”，用來正確處理大于\uFFFF的 Unicode 字符。也就是說，會正確處理四個字節的 UTF-16 編碼。
一旦加上u修飾符號，就會修改下面這些正則表達式的行為：

• 點字符
  點（.）字符在正則表達式中，含義是除了換行符以外的任意單個字符。對于碼點大于0xFFFF的 Unicode 字符，點字符不能識別，必須加上u修飾符。
• Unicode 字符表示法
  ES6 新增了使用大括號表示 Unicode 字符，這種表示法在正則表達式中必須加上u修飾符，才能識別當中的大括號，否則會被解讀為量詞。
• 量詞
  使用u修飾符后，所有量詞都會正確識別碼點大于0xFFFF的 Unicode 字符。
• 預定義模式
  u修飾符也影響到預定義模式，能否正確識別碼點大于0xFFFF的 Unicode 字符。
• i 修飾符
  有些 Unicode 字符的編碼不同，但是字型很相近，比如，\u004B與\u212A都是大寫的K。

RegExp.prototype.unicode 屬性

正則實例對象新增unicode屬性，表示是否設置了u修飾符。

const r1 = /hello/; const r2 = /hello/u;r1.unicode // false r2.unicode // true

y 修飾符

除了u修飾符，ES6 還為正則表達式添加了y修飾符，叫做“粘連”（sticky）修飾符。
y修飾符的作用與g修飾符類似，也是全局匹配，后一次匹配都從上一次匹配成功的下一個位置開始。不同之處在于：g修飾符只要剩余位置中存在匹配就可，而y修飾符確保匹配必須從剩余的第一個位置開始，這也就是“粘連”的涵義。

實際上，y修飾符號隱含了頭部匹配的標志^。
y修飾符的設計本意，就是讓頭部匹配的標志^在全局匹配中都有效。

RegExp.prototype.sticky 屬性

與y修飾符相匹配，ES6 的正則實例對象多了sticky屬性，表示是否設置了y修飾符。

RegExp.prototype.flags 屬性

ES6 為正則表達式新增了flags屬性，會返回正則表達式的修飾符。

// ES5 的 source 屬性 // 返回正則表達式的正文 /abc/ig.source // "abc"// ES6 的 flags 屬性 // 返回正則表達式的修飾符 /abc/ig.flags // 'gi'

s 修飾符：dotAll 模式

正則表達式中，點（.）是一個特殊字符，代表任意的單個字符，但是有兩個例外。一個是四個字節的 UTF-16 字符，這個可以用u修飾符解決；另一個是行終止符（line terminator character）。

所謂行終止符，就是該字符表示一行的終結。以下四個字符屬于”行終止符“。

• U+000A 換行符（\n）
• U+000D 回車符（\r）
• U+2028 行分隔符（line separator）
• U+2029 段分隔符（paragraph separator）

ES2018 引入s修飾符，使得.可以匹配任意單個字符，這被稱為dotAll模式，即點（dot）代表一切字符；所以，正則表達式還引入了一個dotAll屬性，返回一個布爾值，表示該正則表達式是否處在dotAll模式。
/s修飾符和多行修飾符/m不沖突，兩者一起使用的情況下，.匹配所有字符，而^和$匹配每一行的行首和行尾。

后行斷言

JavaScript 語言的正則表達式，只支持先行斷言（lookahead）和先行否定斷言（negative lookahead），不支持后行斷言（lookbehind）和后行否定斷言（negative lookbehind）。ES2018 引入后行斷言，V8 引擎 4.9 版（Chrome 62）已經支持。

• 先行斷言指的是：x只有在y前面才匹配，必須寫成/x(?=y)/。比如，只匹配百分號之前的數字，要寫成/\d+(?=%)/。先行否定斷言指的是:x只有不在y前面才匹配，必須寫成/x(?!y)/。比如，只匹配不在百分號之前的數字，要寫成/\d+(?!%)/。
• 先行斷言括號之中的部分（(?=%)），是不計入返回結果的。
• 后行斷言正好與 先行斷言 相反，x只有在y后面才匹配，必須寫成/(?<=y)x/。比如，只匹配美元符號之后的數字，要寫成/(?<=\$)\d+/。后行否定斷言則與先行否定斷言相反，x只有不在y后面才匹配，必須寫成/(?<!y)x/。比如，只匹配不在美元符號后面的數字，要寫成/(?<!\$)\d+/。
• 后行斷言的括號之中的部分也是不計入返回結果。

后行斷言的實現，需要先匹配/(?<=y)x/的x，然后再回到左邊，匹配y的部分。這種“先右后左”的執行順序，與所有其他正則操作相反，導致了一些不符合預期的行為：

• 首先，后行斷言的組匹配，與正常情況下結果是不一樣的。
• 其次，“后行斷言”的反斜杠引用，也與通常的順序相反，必須放在對應的那個括號之前。

Unicode 屬性類

ES2018 引入了一種新的類的寫法\p{...}和\P{...}，允許正則表達式匹配符合 Unicode 某種屬性的所有字符。

Unicode 屬性類要指定屬性名和屬性值。
對于某些屬性，可以只寫屬性名，或者只寫屬性值。

\P{…}是\p{…}的反向匹配，即匹配不滿足條件的字符。

具名組匹配

正則表達式使用圓括號進行組匹配。

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

上面代碼中，正則表達式里面有三組圓括號。使用exec方法，就可以將這三組匹配結果提取出來。

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;const matchObj = RE_DATE.exec('1999-12-31'); const year = matchObj[1]; // 1999 const month = matchObj[2]; // 12 const day = matchObj[3]; // 31

組匹配的一個問題是，每一組的匹配含義不容易看出來，而且只能用數字序號（比如matchObj[1]）引用，要是組的順序變了，引用的時候就必須修改序號。
ES2018 引入了具名組匹配（Named Capture Groups），允許為每一個組匹配指定一個名字，既便于閱讀代碼，又便于引用。

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;const matchObj = RE_DATE.exec('1999-12-31'); const year = matchObj.groups.year; // 1999 const month = matchObj.groups.month; // 12 const day = matchObj.groups.day; // 31

“具名組匹配”在圓括號內部，模式的頭部添加“問號 + 尖括號 + 組名”（?<year>），然后就可以在exec方法返回結果的groups屬性上引用該組名。同時，數字序號（matchObj[1]）依然有效。
具名組匹配等于為每一組匹配加上了 ID，便于描述匹配的目的。如果組的順序變了，也不用改變匹配后的處理代碼。

---

解構賦值和替換

解構賦值

有了具名組匹配以后，可以使用解構賦值直接從匹配結果上為變量賦值。

let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar'); one // foo two // bar

字符串替換

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;'2015-01-02'.replace(re, '$<day>/$<month>/$<year>') // '02/01/2015'

replace方法的第二個參數也可以是函數，該函數的參數序列如下：

'2015-01-02'.replace(re, (matched, // 整個匹配結果 2015-01-02capture1, // 第一個組匹配 2015capture2, // 第二個組匹配 01capture3, // 第三個組匹配 02position, // 匹配開始的位置 0S, // 原字符串 2015-01-02groups // 具名組構成的一個對象 {year, month, day}) => {let {day, month, year} = groups;return `${day}/${month}/${year}`; });

具名組匹配在原來的基礎上，新增了最后一個函數參數：具名組構成的一個對象。函數內部可以直接對這個對象進行解構賦值。

---

引用

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

String.prototype.matchAll

如果一個正則表達式在字符串里面有多個匹配，現在一般使用g修飾符或y修飾符，在循環里面逐一取出。

var regex = /t(e)(st(\d?))/g; var string = 'test1test2test3';var matches = []; var match; while (match = regex.exec(string)) {matches.push(match); }matches // [ // ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"], // ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"], // ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"] // ]

上面代碼中，while循環取出每一輪的正則匹配，一共三輪。
目前有一個提案，增加了String.prototype.matchAll方法，可以一次性取出所有匹配。不過，它返回的是一個遍歷器（Iterator），而不是數組。

const string = 'test1test2test3';// g 修飾符加不加都可以 const regex = /t(e)(st(\d?))/g;for (const match of string.matchAll(regex)) {console.log(match); } // ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"] // ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"] // ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]

上面代碼中，由于string.matchAll(regex)返回的是遍歷器，所以可以用for...of循環取出。相對于返回數組，返回遍歷器的好處在于，如果匹配結果是一個很大的數組，那么遍歷器比較節省資源。

遍歷器轉為數組是非常簡單的，使用...運算符和Array.from方法就可以了。

// 轉為數組方法一 [...string.matchAll(regex)]// 轉為數組方法二 Array.from(string.matchAll(regex));

轉載于:https://www.cnblogs.com/apimhnkj/p/10141542.html

總結

以上是生活随笔為你收集整理的正则的扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。