javascript - 正則表達式入門先瞭解這些

前言此內容由學習《JavaScript正則表達式迷你書（1.1版）》整理而來（於2020年3月30日看完）。此外還參考了MDN上關於Regex和String的相關內容，還有ECMAScript 6中關於正則的擴展內容，但不多。在文章末尾，會放上所有的鏈接。迷你書共七章，我都做了相應的標號。不過我 ...

前言

此內容由學習《JavaScript正則表達式迷你書（1.1版）》整理而來（於2020年3月30日看完）。此外還參考了MDN上關於Regex和String的相關內容，還有ECMAScript 6中關於正則的擴展內容，但不多。在文章末尾，會放上所有的鏈接。

迷你書共七章，我都做了相應的標號。不過我將【7】7種方法放在了前面，討論了具體情境下怎麼正確使用函數的問題（其實是我自己一直被這個問題困擾，書上的例子為什麼用這個方法，為什麼這個方法這裡返回這樣，那裡卻不是這樣，把我搞崩潰了），也建議大家先搞懂這個吧。

本文重點

正則的 2 種創建
正則的 6 個修飾符（i、g、m、u、y、s）
【7】.用到正則的 7 種方法（RegExp（exec、test）,String（search、match、matchAll、replace、split））
正則表達式中的6種結構（字元字面量、字元組、量詞、錨、分組、分支）
- 【1】.字元匹配：字面量、字元組、量詞。重點還有貪婪匹配與惰性匹配
- 【2】.位置匹配：^ 、$ 、 \b 、\B 、(?=abc) 、 (?!abc) 的使用
- 【3】.括弧的作用：分組和分支結構。知識點有：分組引用（$1的使用）、反向引用（\1的使用）、括弧嵌套、括弧結合量詞
【4】~~.回溯原理~~ （本文大多介紹的是實踐中用的基礎知識，後期對此可能會單獨寫篇，先占個坑）
【5】.正則的拆分：重點是操作符的優先順序
【6】.~~正則表達式的構建~~（本章寫了些提高正則準確性和效率的內容，也先占個坑）
簡單實用的正則測試器

2種創建

語法：/pattern/flags

var regexp = /\w+/g;

var regexp = new RegExp('\\w+','g');

6個修飾符

重點介紹全局與非全局：

全局就是說在字元串中查找所有與正則式匹配的內容，因此會有>=1個結果。
而為了得到這個所謂的所有匹配內容的過程，後面介紹的函數還有一次執行和多次執行之別。
如果正則表達式中存在分組，該模式下各個函數返回的結果也不一樣。

非全局就簡單了，它表示匹配到了一個就不會再繼續往後匹配了，因此都是一次就得結果。

7種方法

以下圖在我學習的過程中，修改了很多遍，才得出了這個最簡潔明瞭的版本。

【補充1】全局模式對 exec 和 test 的影響

正則實例有個 lastIndex 屬性，表示嘗試匹配時，從字元串的 lastIndex 位開始去匹配。

全局匹配下，字元串的四個方法，每次匹配時，都是從 0 開始的，即 lastIndex 屬性始終不變。
而正則實例的兩個方法 exec、test，當正則是全局匹配時，每一次匹配完成後，都會修改 lastIndex。（詳見下麵示例）

如果是非全局匹配，自然都是從字元串第 0 個字元處開始嘗試匹配：

exec()在全局狀態下，需要一次次執行直到末尾才能得到所有匹配項，這裡只是手動模擬下。當然最好是用迴圈實現，while ((match = regexp.exec(str)) !== null) {//輸出}

var regexp = /a/g;
console.log( regexp.exec("a"), regexp.lastIndex );// [ 'a', index: 0, input: 'a', groups: undefined ] 1
console.log( regexp.exec("aba"), regexp.lastIndex );// [ 'a', index: 2, input: 'aba', groups: undefined ] 3
console.log( regexp.exec("ababc"), regexp.lastIndex );// null 0

註意：該部分將的所有正則表達式不知道的都先不要急，慢慢來。

【補充2】全局下match、exec、matchAll示例

match()和exec()示例：

//全局模式下，匹配所有能匹配到的
var regexp1 = /t(e)(st(\d?))/g;
var str1 = 'test1test2';
console.log(str1.match(regexp1)); //match返回所有匹配項組成的數組[ 'test1', 'test2' ]
console.log(regexp1.exec(str1))// exec第一次執行返回第一個匹配項和它的分組['test1', 'e','st1','1',index:0,input:'test1test2',groups:undefined]
console.log(regexp1.exec(str1))//exec第二次執行返回第二個匹配項和它的分組['test2', 'e','st2','2',index:5,input:'test1test2',groups:undefined]
console.log(regexp1.exec(str1))//exec第二次執行已經到末尾了，因此第三次結果為null

//非全局模式下，只匹配到第一項就停止
var regexp2 = /t(e)(st(\d?))/;
var str2 = 'test1test2';
console.log(str2.match(regexp2)); //match['test1', 'e','st1','1',index:0,input:'test1test2',groups:undefined]
console.log(regexp2.exec(str2))  //exec['test1', 'e','st1','1',index:0,input:'test1test2',groups:undefined]

matchAll()示例：

matchAll()是es6的用法，記住它返回的就是一個迭代器。可以用for...of迴圈取出，也可以用...迭代器運算符或者Array.from(迭代器)將它轉為數組。

var array1 = [...str1.matchAll(regexp1)];
console.log(array1)
//['test1','e','st1','1',index: 0,input: 'test1test2',groups: undefined]
//['test2','e','st2','2',index: 5,input: 'test1test2',groups: undefined]

var array2 = [...str2.matchAll(regexp2)];
console.log(array2)
//['test1','e','st1','1',index: 0,input: 'test1test2',groups: undefined]

到目前為止，我們應該積攢了很多問號了。我學的過程中有以下兩個問題：

1./t(e)(st(\d?))/g和/t(e)(st(\d?))/的區別我知道了，但t(e)(st(\d?))這是什麼意思呢？

2.上文所謂的“與正則表達式匹配的內容”和“匹配項中分組捕獲的內容”怎麼理解？

那就帶著問題看後面的內容吧。

7種結構 -字元匹配

字面量

字元組

需要強調的是，雖叫字元組（字元類），但只是其中一個字元。

如果字元組裡的字元特別多，可用連字元 - 來省略和簡寫（見表格示例）。

示例：全局匹配，使用match()方法返回字元串中與表達式匹配的所有內容。[123]表示這個位置的字元可以是1、2、3中的任意一個

量詞

有了一個字元，那我我們就會考慮到需要它出現幾次，那麼量詞來了。

示例：全局匹配，使用match()方法返回字元串中與表達式匹配的所有內容。b{2,5}表示字元b出現2到5次。

貪婪匹配與惰性匹配

貪婪匹配/\d{2,5}/ 表示數字連續出現 2 到 5 次，會儘可能多的匹配。你如果有 6 個連續的數字，那我就要我的上限 5 個；你如果只有 3 個連續數字，那我就要3個。想要我只取 2 個，除非你只有兩個。

惰性匹配/\d{2,5}?/ 表示雖然 2 到 5 次都行，當 2 個就夠的時候，我也不貪，我就取兩個。

對惰性匹配的記憶方式是：量詞後面加個問號，問一問你知足了嗎，你很貪婪嗎？註意是量詞後面量詞後面量詞後面，重要的事說三遍。還是來個例子吧,?與??：
'testtest1test2'.match(/t(e)(st(\d?))/g) 的結果就是 [ 'test', 'test1', 'test2' ]
'testtest1test2'.match(/t(e)(st(\d??))/g) 的結果就是 [ 'test', 'test', 'test' ]