極速通關常用正則

起步

先推薦兩個測試正則網站：

• https://regex101.com/

• https://jex.im/regulex/

正則表達式，大家都很熟悉，說白了就是一堆約定俗成的匹配規則，包含模式和可選的修飾符。創建一個正則表達式對象有兩種語法。較長一點的語法：

regexp = new RegExp("pattern", "flags");

較短一點的語法，使用斜槓 "/"：

regexp = /pattern/; // 沒有修飾符
regexp = /pattern/gmi; // 伴隨修飾符 g、m 和 i（後面會講到）

斜槓 "/"  會告訴 JavaScript 我們正在創建一個正則表達式。它的作用類似於字符串的引號。new RegExp 可以動態傳入參數創建正則。

本文的主要目的就是爲了方便快速查找並理解需要的正則規則。

修飾符

• i  代表不區分大小寫

• g  全部匹配

• u  根據 Unicode 屬性匹配，使用 \p{...}/u ，詳細屬性查看

let regexp = /\p{sc=Han}/gu; // 用來匹配中文
let str = `Hello Привет 你好 123_456`;
alert( str.match(regexp) ); // 你,好

• m  多行模式，每行都會一次匹配（^ 每行會匹配一次開頭 $ 同理）

let str = `1st place: Winnie
2nd place: Piglet
33rd place: Eeyore`;
alert( str.match(/^\d+/gm) ); // 1, 2, 33

字符類

常用的字符類：

• \d 數字

• \s 空格 space

• \w 單字符 word，包括字母數字下劃線

可以組合，比如：

let str = "test ES 6 AA"
let reg = /e\w\s\d/i
str.match(reg) // ["ES 6", index: 6, input: "test ES 6 AA", groups: undefined]

每個字符類都有反向類，代表 非xx

• \D  非數字

• \S  非空格

• \W  非單字符

let str = "+7(903)-123-45-67";
alert( str.replace(/\D/g, "") ); // 79031234567

• .  匹配任意字符（換行符除外） "/ES./"

• \b  查找目標 “詞” 是否在邊界，比如 /\bjava\b/ 可以匹配 !java! 但是不能匹配 javac

錨點 ^ $

• ^xx  表示以 xx 開頭

• xx$  表示以 xx 結尾

二者結合可以用以完全匹配

const time = "12:02"
let reg = /^\d\d:\d\d$/
// .test 可以測試是否匹配
reg.test(time) // true

空字符串 '' ，可以用 /^$/ 匹配

需轉義字符

[\ ^ $ . | ? * + ()

集合與範圍 [...]

• [abc] 表示 'a'、'b'、'c' 中的任意一個，也就是 或

• [a-z]、[1-5] 表示範圍， [0-9A-F] 表示 0-9 或者 A-F， [\w-] 表示 字母 或 連字符 -

• [^abcd] 表示匹配 a、b、c、d 以外的 字符 ，這種寫法用以 排除

或 |

a|b 相當於 [ab] ，我們可以這樣使用：

• gr(a|e)y 嚴格等同 gr[ae]y。

• gra|ey 匹配 “gra” or “ey”。

量詞控制 * + ?

• *  匹配 0~∞ 個   /\d*/ 任意個數字

• +  匹配 1~∞ 個

• ?  匹配 0 or 1 個，相當於 {0,1}

• {n} 匹配 n 個， \d{3} 匹配三個連續數字，相當於 \d\d\d

• {2,5} 匹配 2 - 5 位的數字

• {3,}  匹配 >= 3 個位數字

貪婪模式與懶惰模式

看一個例子

let str = `"hi" some word "ok" aa`
let reg = /".+"/g
str.match(reg) //["hi" some word "ok"]

我們其實是想匹配出 ["hi","ok"] ，但是卻匹配到了整句，這是因爲 貪婪搜索 會先按順序分別取匹配 " . +

1. 當匹配 " 的時候，匹配到第一個引號，此時匹配字符串是 "

2. 當匹配 . 的時候，匹配字符串是 "h

3. 當匹配 + 的時候，字符串變爲了 "hi" some word "ok" aa ！因爲後面所有的字符都符合 .+ 的規則，即不包含換行的任意字符

4. 此時匹配 " ，發現已經匹配多了，找不到 " ，於是開始 回溯 ，知道回溯成爲 "hi" some word "ok"

這就是 貪婪模式 。

再看一個例子：

let str = `123 456`
let reg1 = /\d+ \d+?/
let reg2 = /\d+ \d+/
str.match(reg1) // 123 4
str.match(reg2) // 123 456

在量詞之後加上 ? ，即 .? +? ??  等，會變爲 懶惰模式 ，他不會一次性完全匹配，而是在匹配到滿足條件的第一位時就停止匹配。

捕獲組 (...)

組

舉個例子：

let str = "gogogoaa"
let reg = /(go)+/
str.match(reg) // gogogo

很好理解，就是將多個字符算成一個整體進行匹配

接下來看幾個例子

• 域名匹配

/([\w-]+\.)+\w+/g

可以匹配的格式
aaa.aaa.aa
aa-aa.aaa.aa

• email

/[-.\w]+@([\w-]+\.)+[\w-]+/g

(xx) 被稱爲 組 (group) 的概念，括號內的內容不僅匹配時被作爲一個整體，並且組內匹配的對象會被返回：

let str = '<h1>Hello, world!</h1>';

let tag = str.match(/<(.*?)>/);

alert( tag[0] ); // <h1>
alert( tag[1] ); // h1

嵌套組

返回的結果數組， [0] 的位置是正常全匹配返回的值，而 [1] 的位置是括號內匹配到到的值。我們可以用這個方法做 嵌套組 ：

let str = `<group1 group2>`
let arr = str.match(/<((\w+)\s(\w+))>/)

console.log(arr[0]) //<group1 group2>
console.log(arr[1]) //group1 group2
console.log(arr[2]) //group1
console.log(arr[3]) //group2

let match = 'ac'.match(/a(z)?(c)?/)

alert( match.length ); // 3
alert( match[0] ); // ac（完全匹配）
alert( match[1] ); // undefined，因爲 (z)? 沒匹配項
alert( match[2] ); // c

matchAll 配合 g 修飾符

上述都是在沒有 g 標籤時匹配的單個對象返回的數組，那麼如果有 g 會返回多個對象的話，可以用 matchAll 來匹配：

let str = `<group1> <group2>`
let arr = Array.from(str.matchAll(/<(group\d)>/g))
arr[0][0] // <group1>
arr[0][1] // group1
arr[1][0] // <group2>
arr[1][1] // group2

注意， matchAll 返回的不是數組，而是一個可迭代的對象。

命名組 ?

把上面的例子稍微修改

let str = `<group1 group2>`
let arr = str.match(/<(?<g0>(?<g1>\w+)\s(?<g2>\w+))>/)
let groups = arr.groups
console.log(arr[0]) //<group1 group2>
console.log(groups.g0) //group1 group2
console.log(groups.g1) //group1
console.log(groups.g2) //group2

我們可以通過 在括號後立即加上 ?<name> 的方式設置 group 名，通過返回數組的 groups 屬性獲取一個 group 對象

替換捕獲組

方法 str.replace(regexp, replacement) 用 replacement 替換 str 中匹配 regexp 的所有捕獲組。這使用 $n 來完成，其中 n 是組號。例如，

let str = "John Bull";
let regexp = /(\w+) (\w+)/;
alert( str.replace(regexp, '$2, $1') ); // Bull, John

對於命名括號，引用爲 $<name>。例如，讓我們將日期格式從 “year-month-day” 更改爲 “day.month.year”：

let regexp = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/g;
let str = "2019-10-30, 2020-01-01";
alert( str.replace(regexp, '$<day>.$<month>.$<year>') );
// 30.10.2019, 01.01.2020

反向引用

我們需要找到帶引號的字符串：單引號 '...' 或雙引號 "..."– 應匹配兩種變體。然後我們有一句話 "She's the one!" ，這時候如果我們用 /['"](.*?)['"]/g ，則會匹配到 "She' ，顯然不對

那麼問題在於，我們怎麼讓正則記住我們某一個分組中捕獲的內容 這時候可以使用 反向引用

let str = `He said: "She's the one!".`;

let regexp = /(['"])(.*?)\1/g;

alert( str.match(regexp) ); // "She's the one!"

這裏的 \1 會找到第一個 group ，也就是 (['"]) 匹配到的內容，也就是 " ，然後這個正則就相當於變成了 /(['"])(.*?)"/g

我們還可以用 \k<name> 的方式去引用：

let str = `He said: "She's the one!".`;

let regexp = /(?<g1>['"])(.*?)\k<g1>/g;

alert( str.match(regexp) ); // "She's the one!"

斷言

前瞻斷言

用法：

• x(?=y) 僅當 x 後面是 y 的時候匹配

let str = "1 turkey costs 30€";

alert( str.match(/\d+(?=€)/) ); // 30 （正確地跳過了單個的數字 1）

• x(?!y) 僅當 x 後面不是 y 的時候匹配

後瞻斷言

• (?<=y)x, 匹配 x, 僅在前面是 y 的情況。

• (?<!y)x, 匹配 x, 僅在前面不是 y 的情況。

斷言僅僅是作爲佔位，不會匹配字符，比如 /q(?=u)i/ 匹配 'quit' 是會失敗的，因爲 /q(?=u)/ 只能匹配到 q 而不是 qu

捕獲組

如果我們想要捕捉整個環視表達式或其中的一部分，那也是有可能的。只需要將其包裹在另加的括號中。例如，這裏貨幣符號 (€|kr) 和金額一起被捕獲了：

let str = "1 turkey costs 30€";
let reg = /\d+(?=(€|kr))/; // €|kr 兩邊有額外的括號

alert( str.match(reg) ); // 30, €

字符串和正則方法

• str.match(regexp)  方法在字符串 str 中找到匹配 egexp 的字符。

• str.matchAll(regexp)  它主要用來搜索所有組的所有匹配項

• str.split(regexp|substr, limit)  使用正則表達式（或子字符串）作爲分隔符來分割字符串。

• str.search(regexp)  返回第一個匹配項的位置，如果未找到，則返回 -1

• str.replace(str|regexp, str|func) 用於搜索和替換的通用方法

• regexp.exec(str)  方法返回字符串 str 中的 regexp 匹配項。

• regexp.test(str)  查找匹配項，然後返回 true/false  表示是否存在。

參考

The Modern JavaScript Tutorial

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/GlBI8Xo0SyOrHTxB4p10fQ