前言

正則，熟悉的陌生人，我們在表單校驗中見到它，也在框架源碼 html 轉 ast 樹的 parser 原理中見到它;常常見到，需要時百度一搜，確實能用，卻又一碰到就發(fā)憷，原因很簡單，這火星文，誰看得懂呀!

本文目標，帶你走進正則世界，作為一篇認真負責的科普文，一定要做到讓你們一遍學懂卻不會，于是反復來查看。

正則歷史

正則其實就是規(guī)則的設定，用于驗證或者獲取信息。

真正起源于神經(jīng)網(wǎng)絡

20 世紀 40 年代，兩位神經(jīng)生理學家研究出了一種用數(shù)學方式描述神經(jīng)網(wǎng)絡的方法，并以此在 1956 年發(fā)表了一篇論文《正則表達式搜索算法》，主要描述了一種叫做正則集合(Regular Sets)的符合。

在計算機世界大放異彩

UNIX 之父在十年后的 1968 年，發(fā)表文章《正則表達式搜索算法》，并將正則移植到了大名鼎鼎的文本搜索工具grep中。

正則為什么存在

理解一個東西，不要一上來就背應用層的 API，要去理解，人的大腦本來就是被設計成對理解的東西很容易記憶，不要浪費自己的天賦。

我們說過，正則其實就是規(guī)則的設定，用于驗證或者獲取信息。匹配動作最粗暴的無疑是一一對應，a 對 a，b 對 b，這個規(guī)則就是完全一樣才匹配，但這無疑太低效;一個事物很容易有共性，共性構成集合，比如手機號 13 位，郵箱帶@等等，正則就是讓我們更高效的匹配或獲取這些特定規(guī)則集合的存在。

正則如何做到

正則中的處理方式就是設定子規(guī)則，讓某些符號不再代表本身，而是代表一些子規(guī)則，就像搭建大樓，我們希望找到自己想要的規(guī)則，就得用合適的最小磚塊，再設定使用量，就搭建完成了。

這個子規(guī)則，就是元字符，如我們常見的\d，代表單個 0-1 數(shù)字，\s就是換行指標等空白字符;需要注意的是，我們剛剛一直在強調單個，這其實也很好理解，對于文本而言，最小單元自然是單個字符，有了最小單元，我們再加上重復規(guī)模，就可以搭建我們自己的大樓了。

至此，我們對正則世界基本的了解算是到位了，開始更接地氣的分享叭!

磚塊：元字符

那我們先來了解元字符，有四個維度，分別是【字符組】、【取反字符組】、【常用字符組】、【空白字符】，可以記憶為 【3 + 1】，依次理解。

字符組

基礎使用

對于單字符選擇而言，在正則中的術語被稱為字符組，接下來我們都會用這個術語，但不要被迷惑，它并不是匹配一組數(shù)據(jù)，而只是匹配一組數(shù)據(jù)中的一個字符，這點很關鍵。

語法： [xxx]。

匹配規(guī)則： 目標文本需包含【任意一個包含在括號中的元素】。

獲取信息規(guī)則：將獲取第一個【任意一個包含在括號中的元素】。

舉例： /[abc]/這個正則將匹配 a、b、c 中的任何一位且只有一位，默認匹配第一位，使用測試平臺會得到如下結果。

取反字符組

取反邏輯

正常使用是范圍內選取，不過也會出現(xiàn)【除了這些之外】的范圍選取，這時就需要用到取反了。

語法： [^xxx]。

匹配規(guī)則： 目標文本需包含【任意一個不包含在括號中的元素】。

獲取信息規(guī)則：將獲取第一個【任意一個不包含在括號中的元素】。

舉例： /[^abc]/這個正則將匹配非 a、b、c 中的任何一位且只有一位，默認匹配第一位，使用測試平臺會得到如下結果。

常用字符組

八二原則同樣適用在字符組中，有很多常見的匹配規(guī)則，沒必要重復寫，于是正則就把這些特殊字符組分別取了個別名。

主要分為如下【3+1】概念，三對+一個。

其他常用字符組。

空白字符這類字符比較特殊，單獨拎出來，方便后期直接使用。

到此，我們也就知道了如何去匹配單個字符，這就是我們的“最小規(guī)模”，但一個個匹配肯定是不行，那正則將冗長到難以忍受，所以我們還需要重復，這就是量詞的作用。

要多少塊磚：量詞

理解了字符組，我們就要了解規(guī)模了，這在正則中有個術語 --- 量詞，還是【3+1】，依次理解。

這個沒有很復雜的東西，唯一要注意的是，正則默認是只匹配一次的，即一次匹配完后就算后文還有符合的內容也不再獲取，這涉及到修飾符g，后面再補充。

看案例就行，我們還是以[abc]作為字符組最小單元來演示。

*號：0-n 次

正則： /[abc]*/。

匹配規(guī)則： 目標文本無需包含【任意一個包含在括號中的元素】，此匹配規(guī)則一定成立。

獲取信息規(guī)則：將獲取第一段【包含在括號中且連續(xù)的元素組】。

+號：1+n 次

正則： /[abc]+/。

獲取信息規(guī)則：將獲取第一段【包含在括號中且連續(xù)的元素組】。

匹配規(guī)則： 目標文本需包含【至少一個包含在括號中的元素】。

?號：0 次或 1 次

正則： /[abc]?/。

匹配規(guī)則：此匹配規(guī)則一定成立。

獲取信息規(guī)則：將獲取第一個【任意一個包含在括號中的元素】。

{}符號：精確控制次數(shù)

上面其實都屬于特殊案例，我們可以通過{}精確控制匹配次數(shù)，主要有三個用法：

• {m}：必須出現(xiàn) m 次。
• {m, n}：可以出現(xiàn) m-n 次。
• {m,}：至少出現(xiàn) m 次。

量詞模式

量詞還涉及到模式問題，因為量詞有范圍，這就意味著可取多可取少，但計算機是不允許有歧義的，所以量詞存在三種模式：

• 貪婪模式：默認，會盡可能匹配多的內容。
• 懶惰模式：量詞后面加個?，會盡可能少匹配內容。
• 獨占模式：量詞后面加個+，不觸發(fā)回溯動作。

舉例見模式區(qū)別

測試用例： aaabb。

測試正則：

• 貪婪模式：/a*/。
• 懶惰模式：/a*?/。

貪婪模式：/a*/。

匹配過程：

匹配結果：

對應輸出結果： ['aaa','','','']。

懶惰模式：/a*?/。

匹配過程：

匹配結果：

對應輸出結果： ['','a','','a','','a','','','']。

補充案例：

至此，我們就完成了對量詞規(guī)則的學習。

正則模式

既然量詞有模式，正則本身自然也有模式，針對【大小寫、多行、點通配、備注】情況，存在【3+1】種模式。

• 不區(qū)分大小寫模式。
• 點通配模式。
• 多行匹配模式。
• 注釋模式。

我們來逐一了解：

不區(qū)分大小寫模式(Case-Insensitive)

語法： /(?i)reg/ 對應 js 為 /reg/i。

注意點：

1. 不區(qū)分大小寫模式的指定方式，使用模式修飾符 (?i)。
2. 修飾符如果在括號內，作用范圍是這個括號內的正則，而不是整個正則。

作用： 忽略大小寫進行匹配。

正則： /(?i)(cat) \1/ 對應 js 為 /(cat) \1/i。

如果這時候我們希望重復單詞間保持大小寫完全一致，可以使用如下正則。

正則： /((?i)cat) \1/ 對應 js 為 暫無。

點通配模式(單行匹配模式 -- Single Line)

語法： /(?s)reg/ 對應 js 為暫無。

注意點：

作用： 使得.元字符可以匹配包括換行在內的所有字符。

多行匹配模式

語法： /(?m)reg/ 對應 js 為/reg/m。

注意點：

作用： 使得^和$可以匹配上每行的開頭或結尾。

使用前正則： /^the|cat$/。

使用后正則： /(?m)^the|cat$/ 對應 js 為/^the|cat$/m。

注釋模式

語法： /(?#)reg/ 對應 js 為 暫無。

注意點：

作用： 使得正則支持添加備注信息。

使用正則案例： /(\w+)(?#word) \1(?#word repeat again)/。

正則位置信息

對于匹配而言，就像我們看一個人是不是自己要找的人，不只有對著畫像、照片一直看這一個方法，也可以描述 TA 在什么東西的旁邊、TA 面前是什么、背后是什么等等，這些位置信息在正則中同樣有需求，并且有個專門的術語 -- 斷言。

斷言，即斷定匹配文本的位置關系;前后的內容是什么、中止的位置在哪之類，落實下來分為三類：單詞邊界、行的開始/結束、環(huán)視。

行的開始/結束

這個我們或多或少都接觸過，如果我們要求匹配的內容出現(xiàn)在一行文本的開頭或結尾，就可以使用^和$進行位置界定。

結合之前說的【模式】中多行模式的概念，默認處理文本會被正則當成一行進行處理，無論其是否換行，這是的開始結束就等同于文首和文末;而如果想處理多行情況，只需要改變模式為多行匹配即可，js 中語法為/reg/m。

單詞邊界(Word Boundary)

多行模式+^$可以在行的維度處理邊界問題，但如果是單詞，就無能為力了，如我們希望在下面文本中替換tom這個人名為jerry。

tom asked me if I would go fishing with him tomorrow.

這時如果替換的正則是/tom/ ，就會出現(xiàn)這種錯誤的替換現(xiàn)象。

很明顯，我們要的就是tom，而并不是只要包含 tom 就可以的部分，這時我們就可以使用到單詞邊界的概念，設定開始截止，避免出現(xiàn)匹配歧義。

基礎概念

語法： \b。

作用： 匹配到\w即【[A-Za-z0-9_]】表示范圍之外的字符就中止匹配，可以理解為邊界(Boundary)。

實例

環(huán)視

我們剛剛說了邊界，包括單詞和行的邊界，其實邊界也就是要求匹配文本的前后一定是特定的內容，只是這個特定內容對行來說是^$，對單詞邊界來說是$。

那我們把這個特定范圍再靈活點，對于一段內容而言，有前后兩個方向、滿足或者不滿足兩個情況，意味著有四種情況，如下表。

總結下來其實就是：有尖括號則為左，等號肯定感嘆否。

正則邏輯信息

根據(jù)前文，我們已經(jīng)學習了【字符組】和【量詞】的概念，就像一門編程語言，有組成物料還不夠，自然還需要一些邏輯判斷，在正則中也存在【邏輯元字符】這一概念。

邏輯元字符

|號：或邏輯

某個資源可能以 http:// 開頭，或者 https:// 開頭，也可能以 ftp:// 開頭，那么資源的 協(xié)議部分，我們可以使用 (https?|ftp):// 來表示。

正則優(yōu)先級提升之分組

在正則中存在分組的概念，主要有兩點作用：整體和復用。

整體

代表避免語義分析有歧義，如【匹配 15 位數(shù)字或 18 位數(shù)字】，這時如果寫出這樣的正則/\d{15}\d{3}?/;后面的\d{3}?將代表懶惰模式匹配，這個正則會只匹配 18 位數(shù)字而非 15 位。

測試正則： /\d{15}\d{3}?/。

這里就存在確定\d{3}是一個整體的需求，這可以使用分組實現(xiàn)。

測試正則： /\d{15}(\d{3})?/。

復用有些時候，我們也會需要用到之前匹配到的結果，如【查看文本中的連續(xù)重復單詞】，解決思路就變成了。

1. 寫出匹配單個單詞的正則。
2. 使用之前的結果進行再次匹配。

第二點，就是通過分組實現(xiàn)的;先了解下基礎概念。

基礎概念

語法： 定義使用() ，正則中訪問使用\編號，方法中訪問使用$編號。

作用： 用于分組，被括號括起來的部分默認將被保存為子組，正則中可以通過子組編號訪問，子組編號從一遞增，也可以用語法(?:)從而不保存子組，避免占用編號。

分組引用語法詳解

分組引用

假定分組編號為number，則可以使用\number進行引用。

多編號情況

左括號是第幾個，那就是第幾個分組。

不保存子組

使用此語法后不會為這個子組分配編號。

替換功能

命名分組

V8 目前已經(jīng)完全實現(xiàn)了命名捕獲分組的提案 https://tc39.github.io/proposal-regexp-named-groups/，一起來了解下吧!

基礎概念

語法： 定義使用(?) ，正則中訪問使用\k，方法中訪問使用$。

作用： 用于命名分組，不再使用編號訪問而是直接通過分組變量名訪問，更加準確。

API 結合解構賦值

在 js 關于正則的方法中，如果存在命名分組，會存在groups屬性，里面存放著每個命名分組的名稱以及它們匹配到的值;結合解構賦值，會有很神奇的功效。

在 exec() 和 match() 中的使用：

exec() 和 match() 方法返回的匹配結果數(shù)組上多了一個 groups 屬性，里面存放著每個命名分組的名稱以及它們匹配到的值。

const {day, month, year} = "04-25-2017".match(/(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/).groups

在 replace(/.../, replacement) 中的使用：

當replacement為函數(shù)時，在實參列表的最末尾，多傳了一個 groups 對象。

"04-25-2017".replace(/(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/, (...args) => {
  const groups = args.slice(-1)[0]
  const {day, month, year} = groups
  return `${day}-${month}-${year}`
}) 

正則編程

這是最最關鍵的部分，學來就得用上呀，我們來分享在正則在前端編程中的應用。

正則最終還是要落實到編程語言中來，讓我們來看下正則編程吧!

正則的處理可以區(qū)分為如下四類：

• 校驗文本內容。
• 提取文本內容。
• 替換文本內容。
• 切割文本內容。

讓我們逐一了解。

校驗文本內容

需注意：關于 lastIndex，即正則會將下一次匹配開始的位置 ;字符串的四個方法，每次匹配都是從 0 開始的，即 lastIndex 不變;而正則的兩個方法 exec 和 test ，如果是全局匹配，則每次匹配完都會改變 lastIndex 的值，這就會導致可能出現(xiàn)【處理兩次，第一次成功，第二次失敗】的情況。

var regex = new RegExp(/^\d{4}-\d{2}-\d{2}/, 'g')
regex.test('2021-12-21') // true
console.log(regex.lastIndex ) // 10
regex.test('2021-12-21') // false
console.log(regex.lastIndex ) // 0

由于我們這里是文本校驗，并不需要找出所有的。所以建議 JavaScript 中文本校驗在使用 RegExp 時不要設置 g 模式。

字符串方法：search

search 會將字符串轉為正則。

正則方法：test

提取文本內容

字符串方法：match

match 會將字符串轉為正則。

注意：match 方法的返回值與修飾符 g 有關(沒有匹配上時返回 null)。

• 沒有 g ：返回標準匹配格式，即：數(shù)組的第一個元素是整體匹配的內容，接下來是分組捕獲的內容，然后是整體匹配的第一個下標，最后是目標字符串。
• 有 g ：返回的是一個包含所有匹配內容的數(shù)組。

正則方法：exec

exec 比 match 更強大，可以解決 有修飾符 g 時 match 沒有索引信息的問題，在使用 exec 時，正則會將下一次匹配開始的位置存放在正則的屬性 lastIndex 上。

替換文本內容

字符串方法：replace

切割文本內容

字符串方法：split

• 可以有第二個參數(shù)，表示結果數(shù)組的最大長度。
• 如果正則使用分組時，結果數(shù)組中是包含分隔符的。

前端相關 API 總結

string

• match。
• split。
• search。
• replace。

RegExp

• test。
• exec。

總結

做下總結吧，繪制知識圖譜，方便自己記憶，也方便和人分享。

3 + 1 元字符；3 + 1 常用元字符；3 + 1  正則量詞；3         量詞匹配模式；3 + 1  正則匹配模式；3 + 1 正則邏輯

首先物料元字符，有四個維度，分別是【字符組】、【取反字符組】、【常用字符組】、【空白字符】，可以記憶為 【3 + 1】。

理解了字符組，我們就要了解規(guī)模了，這在正則中有個術語 --- 量詞還是【3+1】。

量詞還涉及到模式問題，因為量詞有范圍，這就意味著可取多可取少，但計算機是不允許有歧義的，所以量詞存在三種模式。

既然量詞有模式，正則本身自然也有模式，針對【大小寫、多行、點通配、備注】情況，存在【3+1】種模式。

就像定位，不止需要本身的絕對信息，還需要看他的相對位置信息，這個信息在正則中叫斷言，存在三種情況，【行首尾、單詞邊界和環(huán)視】，其中環(huán)視又存在前后是不是四種情況。

就像編程語言，我們有了零碎的物料是不夠的，還需要邏輯，在正則中存在分支語句|和優(yōu)先級分組，分組又有三類，默認分組、非捕獲分組和命名分組。

至此，我們也就用非常精煉的總結性語句概括了正則的整體脈絡啦!

尾聲少年們，心法已定，拿走不謝，希望我能做到讓你們一遍看懂而記不住，要首尾呼應，嘗試動手自己實現(xiàn)下吧，有些需求會發(fā)現(xiàn)如果用正則的角度，會有很多很神奇的實現(xiàn)方式呀，而且如果能幫助到別人，也超有成就感的。