javascript - 正則運算式入門先了解這些-有解無憂

前言

此內容由學習《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' ]