[[436729]]

本文轉(zhuǎn)載自微信公眾號(hào)「微醫(yī)大前端技術(shù)」，作者焦傳鍇  。轉(zhuǎn)載本文請(qǐng)聯(lián)系微醫(yī)大前端技術(shù)公眾號(hào)。

起步

先推薦兩個(gè)測(cè)試正則網(wǎng)站：

• https://regex101.com/
• https://jex.im/regulex/

正則表達(dá)式，大家都很熟悉，說(shuō)白了就是一堆約定俗成的匹配規(guī)則，包含模式和可選的修飾符。創(chuàng)建一個(gè)正則表達(dá)式對(duì)象有兩種語(yǔ)法。較長(zhǎng)一點(diǎn)的語(yǔ)法：

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

較短一點(diǎn)的語(yǔ)法，使用斜杠 "/"：

regexp = /pattern/; // 沒(méi)有修飾符 
 
regexp = /pattern/gmi; // 伴隨修飾符 g、m 和 i(后面會(huì)講到) 

斜杠 "/" 會(huì)告訴 JavaScript 我們正在創(chuàng)建一個(gè)正則表達(dá)式。它的作用類似于字符串的引號(hào)。new RegExp 可以動(dòng)態(tài)傳入?yún)?shù)創(chuàng)建正則。

本文的主要目的就是為了方便快速查找并理解需要的正則規(guī)則。

修飾符

• i 代表不區(qū)分大小寫(xiě)
• g 全部匹配
• u 根據(jù) Unicode 屬性匹配，使用 \p{...}/u ，詳細(xì)屬性查看

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

• m 多行模式，每行都會(huì)一次匹配(^ 每行會(huì)匹配一次開(kāi)頭 $ 同理)

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

字符類

常用的字符類：

• \d 數(shù)字
• \s 空格 space
• \w 單字符 word，包括字母數(shù)字下劃線

可以組合，比如：

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] 

每個(gè)字符類都有反向類，代表 非xx

• \D 非數(shù)字
• \S 非空格
• \W 非單字符

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

• . 匹配任意字符(換行符除外) "/ES./"
• \b 查找目標(biāo)“詞”是否在邊界，比如 /\bjava\b/ 可以匹配 !java! 但是不能匹配 javac

錨點(diǎn) ^ $

• ^xx 表示以 xx 開(kāi)頭
• xx$ 表示以 xx 結(jié)尾

二者結(jié)合可以用以完全匹配

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

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

需轉(zhuǎn)義字符

[ \ ^ $ . | ? * + ( ) 

集合與范圍 [...]

• [abc] 表示 'a'、'b'、'c' 中的任意一個(gè)，也就是 或
• [a-z]、[1-5] 表示范圍， [0-9A-F] 表示 0-9 或者 A-F， [\w-] 表示 字母 或 連字符 -
• [^abcd] 表示匹配 a、b、c、d 以外的 字符 ，這種寫(xiě)法用以 排除

或 |

a|b 相當(dāng)于 [ab] ，我們可以這樣使用：

• gr(a|e)y 嚴(yán)格等同 gr[ae]y。
• gra|ey 匹配 “gra” or “ey”。

量詞控制 * + ?

• * 匹配 0~∞ 個(gè) /\d*/ 任意個(gè)數(shù)字
• + 匹配 1~∞ 個(gè)
• ? 匹配 0 or 1 個(gè)，相當(dāng)于 {0,1}
• {n} 匹配 n 個(gè)， \d{3} 匹配三個(gè)連續(xù)數(shù)字，相當(dāng)于 \d\d\d
• {2,5} 匹配2 - 5位的數(shù)字
• {3,} 匹配 >= 3 個(gè)位數(shù)字

貪婪模式與懶惰模式

看一個(gè)例子

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

我們其實(shí)是想匹配出 ["hi","ok"] ，但是卻匹配到了整句，這是因?yàn)?貪婪搜索 會(huì)先按順序分別取匹配 " . +

• 當(dāng)匹配 " 的時(shí)候，匹配到第一個(gè)引號(hào)，此時(shí)匹配字符串是 "
• 當(dāng)匹配 . 的時(shí)候，匹配字符串是 "h
• 當(dāng)匹配 + 的時(shí)候，字符串變?yōu)榱?"hi" some word "ok" aa !因?yàn)楹竺嫠械淖址挤?.+ 的規(guī)則，即不包含換行的任意字符
• 此時(shí)匹配 " ，發(fā)現(xiàn)已經(jīng)匹配多了，找不到 " ，于是開(kāi)始 回溯 ，知道回溯成為 "hi" some word "ok"

這就是 貪婪模式 。

再看一個(gè)例子：

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

在量詞之后加上 ? ，即 .? +? ?? 等，會(huì)變?yōu)?懶惰模式 ，他不會(huì)一次性完全匹配，而是在匹配到滿足條件的第一位時(shí)就停止匹配。

捕獲組 (...)

組

舉個(gè)例子：

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

很好理解，就是將多個(gè)字符算成一個(gè)整體進(jìn)行匹配

接下來(lái)看幾個(gè)例子

• 域名匹配

/([\w-]+\.)+\w+/g 
 
可以匹配的格式 
 
aaa.aaa.aa 
 
aa-aa.aaa.aa 

• email

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

(xx) 被稱為 組(group) 的概念，括號(hào)內(nèi)的內(nèi)容不僅匹配時(shí)被作為一個(gè)整體，并且組內(nèi)匹配的對(duì)象會(huì)被返回：

let str = '<h1>Hello, world!</h1>'; 
 
let tag = str.match(/<(.*?)>/); 
 
alert( tag[0] ); // <h1> 
alert( tag[1] ); // h1 

嵌套組

返回的結(jié)果數(shù)組， [0] 的位置是正常全匹配返回的值，而 [1] 的位置是括號(hào)內(nèi)匹配到到的值。我們可以用這個(gè)方法做 嵌套組 ：

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，因?yàn)?nbsp;(z)? 沒(méi)匹配項(xiàng) 
alert( match[2] ); // c 

matchAll 配合 g 修飾符

上述都是在沒(méi)有 g 標(biāo)簽時(shí)匹配的單個(gè)對(duì)象返回的數(shù)組，那么如果有 g 會(huì)返回多個(gè)對(duì)象的話，可以用 matchAll 來(lái)匹配：

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 返回的不是數(shù)組，而是一個(gè)可迭代的對(duì)象。

命名組 ?<name>

把上面的例子稍微修改

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 

我們可以通過(guò) 在括號(hào)后立即加上 ? 的方式設(shè)置 group 名，通過(guò)返回?cái)?shù)組的 groups 屬性獲取一個(gè) group 對(duì)象

替換捕獲組

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

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

對(duì)于命名括號(hào)，引用為 $。例如，讓我們將日期格式從 “year-month-day” 更改為 “day.month.year”：

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

反向引用

我們需要找到帶引號(hào)的字符串：?jiǎn)我?hào) '...' 或雙引號(hào) "..."– 應(yīng)匹配兩種變體。然后我們有一句話 "She's the one!" ，這時(shí)候如果我們用 /['"](.*?)['"]/g ，則會(huì)匹配到 "She' ，顯然不對(duì)

那么問(wèn)題在于，我們?cè)趺醋屨齽t記住我們某一個(gè)分組中捕獲的內(nèi)容 這時(shí)候可以使用 反向引用

let str = `He said: "She's the one!".`; 
 
let regexp = /(['"])(.*?)\1/g; 
 
alert( str.match(regexp) ); // "She's the one!" 

這里的 \1 會(huì)找到第一個(gè) group ，也就是 (['"]) 匹配到的內(nèi)容，也就是 " ，然后這個(gè)正則就相當(dāng)于變成了 /(['"])(.*?)"/g

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

let str = `He said: "She's the one!".`; 
 
let regexp = /(?['"])(.*?)\k/g; 
 
alert( str.match(regexp) ); // "She's the one!" 

斷言

前瞻斷言

用法：

• x(?=y) 僅當(dāng) x 后面是 y 的時(shí)候匹配

let str = "1 turkey costs 30€"; 
 
alert( str.match(/\d+(?=€)/) ); // 30 （正確地跳過(guò)了單個(gè)的數(shù)字 1） 

x(?!y) 僅當(dāng) x 后面不是 y 的時(shí)候匹配

后瞻斷言

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

斷言僅僅是作為占位，不會(huì)匹配字符，比如 /q(?=u)i/ 匹配 'quit' 是會(huì)失敗的，因?yàn)?/q(?=u)/ 只能匹配到 q 而不是 qu

捕獲組

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

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

字符串和正則方法

• str.match(regexp) 方法在字符串 str 中找到匹配 egexp 的字符。
• str.matchAll(regexp) 它主要用來(lái)搜索所有組的所有匹配項(xiàng)
• str.split(regexp|substr, limit) 使用正則表達(dá)式(或子字符串)作為分隔符來(lái)分割字符串。
• str.search(regexp) 返回第一個(gè)匹配項(xiàng)的位置，如果未找到，則返回 -1
• str.replace(str|regexp, str|func) 用于搜索和替換的通用方法
• regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配項(xiàng)。
• regexp.test(str) 查找匹配項(xiàng)，然后返回 true/false 表示是否存在。

參考

The Modern JavaScript Tutorial

別忘記對(duì)我素質(zhì)三連，點(diǎn)贊、關(guān)注、評(píng)論^_^

 

前往微醫(yī)互聯(lián)網(wǎng)醫(yī)院在線診療平臺(tái)，快速問(wèn)診，3分鐘為你找到三甲醫(yī)生。(https://wy.guahao.com/?channel=influence)