建站
咨詢
售后
建站咨詢
新聞中心
正則表達(dá)式是一種更為強大的字符串匹配、字符串查找、字符串替換等操作工具。今天來學(xué)習(xí)一下 JavaScript 中的正則表達(dá)式！
一、基本概念
正則表達(dá)式（Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規(guī)則的字符串搜索模式。搜索模式可用于文本搜索和文本替換。它用一系列字符定義搜索模式。
正則表達(dá)式的用途有很多，比如：
- 表單輸入驗證。
- 搜索和替換。
- 過濾大量文本文件（如日志）中的信息。
- 讀取配置文件。
- 網(wǎng)頁抓取。
- 處理具有一致語法的文本文件，例如 CSV。
正則表達(dá)式的語法如下：
/正則表達(dá)式主體/修飾符(可選)
先來看一個最基本的正則表達(dá)式：??/處/??，它只匹配到了字符串中的第一個“處”：
這里，正則表達(dá)式的主體就是“處”，沒有使用修飾符，我們會在后面來介紹正則表達(dá)式的修飾符。
二、創(chuàng)建方式
創(chuàng)建正則表達(dá)式的方式有兩種：
- 字面量：正則表達(dá)式直接放在?
?/ /??之中：
const rex = /pattern/;
- 構(gòu)造函數(shù)：RegExp 對象表示正則表達(dá)式的一個實例：
const rex = new RegExp("pattern");這兩種方法的一大區(qū)別是對象的構(gòu)造函數(shù)允許傳遞帶引號的表達(dá)式，通過這種方式就可以動態(tài)創(chuàng)建正則表達(dá)式。
通過這兩種方法創(chuàng)建出來的 Regex 對象都具有相同的方法和屬性：
let RegExp1 = /a|b/
let RegExp2 = new RegExp('a|b')
console.log(RegExp1) // 輸出結(jié)果：/a|b/
console.log(RegExp2) // 輸出結(jié)果：/a|b/
三、模式匹配
關(guān)于正則表達(dá)式最復(fù)雜的地方就是如何編寫正則規(guī)則了，下面就來看如何編寫正則表達(dá)式。
1、字符集合
如果我們想匹配 bat、cat 和 fat 這種類型的字符串該怎么辦？可以通過使用字符集合來做到這一點，用 [] 表示，它會匹配包含的任意一個字符。這里就可以使用??/[bcf]at/ig??：
可以看到，這里匹配到了字符串中的 bat、cat、fat。因為我們使用了 g 修飾符，所以匹配到了三個結(jié)果。
當(dāng)然，字符集也可以用來匹配數(shù)字：
2、字符范圍
如果我們想要在字符串中匹配所有以 at 結(jié)尾的單詞，最直接的方式是使用字符集，并在其中提供所有的字母。對于這種在一個范圍中的字符， 就可以直接定義字符范圍，用??-???表示。它用來匹配指定范圍內(nèi)的任意字符。這里就可以使用??/[a-z]at/ig???。
可以看到，正則表達(dá)式按照我們的預(yù)期匹配了。
常見的使用范圍的方式如下：
- 部分范圍：?
?[a-f]??，匹配 a 到 f 的任意字符。 - 小寫范圍：?
?[a-z]??，匹配 a 到 z 的任意字符。 - 大寫范圍：?
?[A-Z]??，匹配 A 到 Z 的任意字符。 - 數(shù)字范圍：?
?[0-9]??，匹配 0 到 9 的任意字符。 - 符號范圍：?
?[#$%&@]??。 - 混合范圍：?
?[a-zA-Z0-9]??，匹配所有數(shù)字、大小寫字母中的任意字符。
3. 數(shù)量字符
如果想要匹配三個字母的單詞，根據(jù)上面我們學(xué)到的字符范圍，可以這樣來寫：
[a-z][a-z][a-z]
這里我們匹配的三個字母的單詞，那如果想要匹配10個、20個字母的單詞呢？難道要一個個來寫范圍嗎？有一種更好的方法就是使用花括號??{}??來表示，來看例子：
可以看到，這里我們匹配到了所有連續(xù)5個字母的單詞（包括超過5個字母的單詞，不過只會匹配到前5個字母）。
其實匹配重復(fù)字符的完整語法是這樣的：??{m,n}??，它會匹配前面一個字符至少 m 次至多 n 次重復(fù)，{m}表示匹配 m 次，{m,}表示至少 m 次。
所以，當(dāng)我們給5后面加上逗號時，就表示至少匹配五次：
所以這里就匹配到了所有連續(xù)5個或5個以上的單詞。
當(dāng)匹配次數(shù)為至少4次，至多5次時，匹配結(jié)果如下：
除了可以使用大括號來匹配一定數(shù)量的字符，還有三個相關(guān)的模式：
- ?
?+???：匹配前面一個表達(dá)式一次或者多次，相當(dāng)于??{1,}??。 - ?
?*???：匹配前面一個表達(dá)式0次或者多次，相當(dāng)于??{0,}??。 - ?
?????：單獨使用匹配前面一個表達(dá)式零次或者一次，相當(dāng)于??{0,1}??，如果跟在量詞*、+、?、{}后面的時候?qū)沽吭~變?yōu)榉秦澙纺Ｊ剑ūM量匹配少的字符），默認(rèn)是使用貪婪模式。
來看一個簡單的例子，這里我們匹配的正則表達(dá)式為??/a+/ig??，結(jié)果如下：
它和??/a{1,}/ig???的匹配結(jié)果是一樣的：
使用??/[a-z]+/ig???就可以匹配任意長度的純字母單詞：
4、元字符
使用元字符可以編寫更緊湊的正則表達(dá)式模式。常見的元字符如下：
- ?
?\d???：相當(dāng)于??[0-9]??，匹配任意數(shù)字。 - ?
?\D???：相當(dāng)于??[^0-9]??。 - ?
?\w???：相當(dāng)于??[0-9a-zA-Z]??，匹配任意數(shù)字、大小寫字母和下劃線。 - ?
?\W??：相當(dāng)于：[^0-9a-zA-Z]。 - ?
?\s???：相當(dāng)于??[\t\v\n\r\f]???，匹配任意空白符，包括空格，水平制表符??\t???，垂直制表符??\v???，換行符??\n???，回車符??\r???，換頁符??\f??。 - ?
?\S???：相當(dāng)于??[^\t\v\n\r\f]??，表示非空白符。
來看一個簡單的例子：
這里使用??\d??來匹配任意數(shù)字、字母和下劃線。這里就匹配到了7個連續(xù)四位的字符。
5、特殊字符
使用特殊字符可以編寫更高級的模式表達(dá)式，常見的特殊字符如下：
- ?
?.??：匹配除了換行符之外的任何單個字符。 - ?
?\??：將下一個字符標(biāo)記為特殊字符、或原義字符、或向后引用、或八進制轉(zhuǎn)義符。 - ?
?|??：邏輯或操作符。 - ?
?[^]??：取非，匹配未包含的任意字符。
來看一個簡單的例子，如果我們使用 ??/ab*/ig?? 進行匹配，結(jié)果就如下：
那我們就是想要匹配 * 怎么辦？就可以使用 ??\?? 對其進行轉(zhuǎn)義：
這樣就只會匹配到 ??ab*?? 了。
或匹配也很簡單，來看例子，匹配規(guī)則為：??/ab|cd/ig??，匹配結(jié)果如下：
這里就會匹配到字符串中所有 ??ab??? 和 ??cd??? 字符。那如果想要匹配 ??sabz??? 或者??scdz??呢？開頭和結(jié)尾是相同的，只有中間的兩個字符是可選的。其實只需要給中間的或部分加上括號就可以了：
取非規(guī)則在范圍中使用，來看例子：
這里匹配到了所有非字母的字符。
6、位置匹配
如果我們想匹配字符串中以某些字符結(jié)尾的單詞，以某些字符開頭的單詞該如何實現(xiàn)呢？正則表達(dá)式中提供了方法通過位置來匹配字符：
- ?
?\b??：匹配一個單詞邊界，也就是指單詞和空格間的位置。 - ?
?\B??：匹配非單詞邊界。 - ?
?^??：匹配開頭，在多行匹配中匹配行開頭。 - ?
?$??：匹配結(jié)尾，在多行匹配中匹配行結(jié)尾。 - ?
?(?=p)??：匹配 p 前面的位置。 - ?
?(?!=p)??：匹配不是 p 前面的位置。
最常見的就是匹配開始和結(jié)束位置。先來看一個開始位置的匹配，這里使用 ??/^ex/igm??? 來匹配多行中以??ex?? 開頭的行：
使用??/e$/igm??來匹配以 e 結(jié)尾的行：
可以使用 ??\w+$ ??來匹配每一行的最后一個單詞：
需要注意，這里我們都使用 ??m?? 修飾符開啟了多行模式。
使用 ??/(?=the)/ig??? 來匹配字符串中??the??前的面的位置：
我們可以使用??\b??來匹配單詞的邊界，匹配的結(jié)果如下：
這可能比較難理解，我們可以使用以下正則表達(dá)式來匹配完整的單詞：??\b\w+\b??，匹配結(jié)果如下：
四、修飾符
正則表達(dá)式常見的修飾符如下：
- ?
?g??：表示全局模式，即運用于所有字符串。 - ?
?i??：表示不區(qū)分大小寫，即匹配時忽略字符串的大小寫。 - ?
?m??：表示多行模式，強制 $ 和 ^ 分別匹配每個換行符。
這些修飾符總是用在最后一個正斜杠后面，可以一起使用。下面來分別看看這些修飾符的作用。
最開始的例子中，字符串中有兩個“處”，但是只匹配到了一個。這是因為正則表達(dá)式默認(rèn)匹配第一個符合條件的字符。如果想要匹配所有符合條件的字符，就可以使用 ??g?? 修飾符：
/處/g
這樣就匹配到了所有符合條件的字符：
當(dāng)需要匹配引英文字符串，并且忽略字符串的字母大小寫時，??i?? 修飾符就派上用場了。先來看下面的表達(dá)式：
/a/g
在進行匹配時，它匹配到了字符串中所有的 ??a??? 字符。但是最開始的 ??A?? 是沒匹配到的，因為兩者大小寫不一致：
那我們來添加上 ??i?? 修飾符：
/a/gi
這時所有的 ??a??? 都被匹配到了，無論是大寫還是小寫，總共匹配到了三個 ??a??：
還有一個小疑問， 如果是對象構(gòu)造函數(shù)的方式來構(gòu)造正則表達(dá)式使，如何添加這些修飾符呢？其實很簡單，只要將修飾符作為第二個參數(shù)傳遞給 構(gòu)造函數(shù)就可以了：
let regExp = new RegExp('[2b|^2b]', 'gi')
console.log(regExp) // 輸出結(jié)果：/[2b|^2b]/gi
五、RegExp 實例
1、實例方法
RegExp 實例置了??test()???和??exec()?? 這兩個方法來校驗正則表達(dá)式。下面來分別看一下這兩個方法。
（1）test()??test()??用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
const regex1 = /a/ig;
const regex2 = /hello/ig;
const str = "Action speak louder than words";
console.log(regex1.test(str)); // true
console.log(regex2.test(str)); // false
（2）exec()??exec()??用于檢索字符串中的正則表達(dá)式的匹配。該函數(shù)返回一個數(shù)組，其中存放匹配的結(jié)果。如果未找到匹配，則返回值為 null。
const regex1 = /a/ig;
const regex2 = /hello/ig;
const str = "Action speak louder than words";
console.log(regex1.exec(str)); // ['A', index: 0, input: 'Action speak louder than words', groups: undefined]
console.log(regex2.exec(str)); // null
在當(dāng)在全局正則表達(dá)式中使用 ??exec??? 時，每隔一次就會返回??null??，如圖：
這是怎么回事呢？MDN 的解釋如下：
在設(shè)置了 global 或 sticky 標(biāo)志位的情況下（如 /foo/g or /foo/y），JavaScript RegExp 對象是有狀態(tài)的。他們會將上次成功匹配后的位置記錄在 lastIndex 屬性中。使用此特性，exec() 可用來對單個字符串中的多次匹配結(jié)果進行逐條的遍歷（包括捕獲到的匹配），而相比之下， String.prototype.match() 只會返回匹配到的結(jié)果。
為了解決這個問題，我們可以在運行每個exec命令之前將??lastIndex??賦值為 0：
2、實例屬性
RegExp實例還內(nèi)置了一些屬性，這些屬性可以獲知一個正則表達(dá)式的各方面的信息，但是用處不大。
|
屬性 |
描述 |
|
global |
布爾值，表示是否設(shè)置了g標(biāo)志 |
|
ignoreCase |
布爾值，表示是否設(shè)置了i標(biāo)志 |
|
lastIndex |
整數(shù)，表示開始搜索下一個匹配項的字符位置，從0算起 |
|
multiline |
布爾值，表示是否設(shè)置了m標(biāo)志 |
|
source |
正則表達(dá)式的字符串表示，按照字面量形式而非傳入構(gòu)造函數(shù)重大的字符串模式匹配 |
六、字符串方法
在 JavaScript 中有6種常用的方法是支持正則表達(dá)式的，下面來分別看看這些方法。
1、search()
??search()?? 方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串，并返回子串的起始位置。如果沒有找到任何匹配的子串，則返回 -1。
const regex1 = /a/ig;
const regex2 = /p/ig;
const regex3 = /m/ig;
const str = "Action speak louder than words";
console.log(str.search(regex1)); // 輸出結(jié)果：0
console.log(str.search(regex2)); // 輸出結(jié)果：8
console.log(str.search(regex3)); // 輸出結(jié)果：-1
可以看到，??search()?? 方法只會返回匹配到的第一個字符的索引值，當(dāng)沒有匹配到相應(yīng)的值時，就會返回-1。
2、match()
??match()??? 方法可在字符串內(nèi)檢索指定的值，或找到一個或多個正則表達(dá)式的匹配。如果沒有找到任何匹配的文本， ??match()??? 將返回 ??null??。否則，它將返回一個數(shù)組，其中存放了與它找到的匹配文本有關(guān)的信息。
const regex1 = /a/ig;
const regex2 = /a/i;
const regex3 = /m/ig;
const str = "Action speak louder than words";
console.log(str.match(regex1)); // 輸出結(jié)果：['A', 'a', 'a']
console.log(str.match(regex2)); // 輸出結(jié)果：['A', index: 0, input: 'Action speak louder than words', groups: undefined]
console.log(str.match(regex3)); // 輸出結(jié)果：null
可以看到，當(dāng)沒有 ??g??? 修飾符時，就只能在字符串中執(zhí)行一次匹配，如果想要匹配所有符合條件的值，就需要添加 ??g?? 修飾符。
3、matchAll()
??matchAll()??? 方法返回一個包含所有匹配正則表達(dá)式的結(jié)果及分組捕獲組的迭代器。因為返回的是遍歷器，所以通常使用??for...of??循環(huán)取出。
for (const match of 'abcabc'.matchAll(/a/g)) {
console.log(match)
}
//["a", index: 0, input: "abcabc", groups: undefined]
//["a", index: 3, input: "abcabc", groups: undefined]需要注意，該方法的第一個參數(shù)是一個正則表達(dá)式對象，如果傳的參數(shù)不是一個正則表達(dá)式對象，則會隱式地使用 ??new RegExp(obj)??? 將其轉(zhuǎn)換為一個 ??RegExp??? 。另外，RegExp必須是設(shè)置了全局模式??g???的形式，否則會拋出異常 ??TypeError??。
4、replace()
??replace()?? 用于在字符串中用一些字符串替換另一些字符串，或替換一個與正則表達(dá)式匹配的子串。
const regex = /A/g;
const str = "Action speak louder than words";
console.log(str.replace(regex, 'a')); // 輸出結(jié)果：action speak louder than words
可以看到，第一個參數(shù)中的正則表達(dá)式匹配到了字符串的第一個大寫的 A，并將其替換為了第二個參數(shù)中的小寫的 a。
5、replaceAll()
??replaceAll()?? 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串，該函數(shù)會替換所有匹配到的子字符串。
const regex = /a/g;
const str = "Action speak louder than words";
console.log(str.replaceAll(regex, 'A')); // 輸出結(jié)果：Action speAk louder thAn words
需要注意，當(dāng)使用一個 ??regex??? 時，您必須設(shè)置全局（"g"）標(biāo)志， 否則，它將引發(fā) ??TypeError??："必須使用全局 RegExp 調(diào)用 replaceAll"。
6、split()
??split()?? 方法用于把一個字符串分割成字符串?dāng)?shù)組。其第一個參數(shù)是一個字符串或正則表達(dá)式，從該參數(shù)指定的地方分割字符串。
const regex = / /gi;
const str = "Action speak louder than words";
console.log(str.split(regex)); // 輸出結(jié)果：['Action', 'speak', 'louder', 'than', 'words']
這里的 ??regex?? 用來匹配空字符串，所以最終在字符串的每個空格處將字符串拆成了數(shù)組。
七、實際應(yīng)用
下面來通過正則表達(dá)式的幾個實際應(yīng)用來鞏固一下上面的知識。
1、匹配密碼
檢查密碼的格式，其包含至少一個大寫字母、小寫字母、數(shù)字、符號，長度為8-12位：
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*\W).{8,12}$/g這里我們主要使用了正則表達(dá)式中的正向前瞻，正向前瞻語法為??(?=pattern)???，即在目標(biāo)字符串的相應(yīng)位置必須有??pattern??部分匹配的內(nèi)容，但不作為匹配結(jié)果處理，更不會存儲在緩沖區(qū)內(nèi)供以后使用。來看一下這個正則表達(dá)式的每一部分的含義：
- ?
?(?=.*[a-z])??：匹配任何后面跟著小寫字母的字符。 - ?
?(?=.*[A-Z])??：匹配任何后面跟著大寫字母的字符。 - ?
?(?=.*\d)??：匹配任何后面跟著數(shù)字的字符。 - ?
?(?=.*\W)??：匹配任何后面跟著符號的字符。 - ?
?.{8,12}??：匹配的長度至少為 8 個字符，至多為12個字符。 - ?
?^???和??$??可以保證匹配從字符串的開頭到結(jié)尾進行匹配，也就是只對整個密碼進行匹配，不考慮部分匹配。
下面是測試結(jié)果：
2、匹配郵箱
檢查電子郵箱的地址：
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[ a-zA-Z0-9-]+)*$/g下面來看一下這個正則表達(dá)式每一部分的含義：
- ?
?^[a-zA-Z0-9.!#$%&'*+/=?^_???~-]+??：檢查是否使用了所有有效字符并且至少有了一個（末尾的??+`用于檢查是否至少有一個字符）。 - ?
?[a-zA-Z0-9-]+??：這一部分用來檢驗主機名是否有效，主機名可以是大小寫字母、數(shù)字、中橫線。最后的 + 表示至少有一位。 - ?
?(?:\.[a-zA-Z0-9-]+)*???：這一部分是可選的域名后綴，這里使用的??*?? 就表示前面的字符是0個或者多個，這樣.com、.com.cn等域名都可以匹配到。 - ?
?^???和??$??可以保證匹配從字符串的開頭到結(jié)尾進行匹配，也就是只對整個郵箱字符串進行匹配，不考慮部分匹配。
下面是測試結(jié)果：
3、匹配數(shù)字
檢查數(shù)字是否是整數(shù):??/^\d+$/???,其中??\d+??表示至少有一位數(shù)字。測試結(jié)果如下：
檢查數(shù)字是否是小數(shù)：??/^\d*\.\d+$/???，其中??\d*??? 表示至少有0位數(shù)字，??\.???就是把小數(shù)點進行了轉(zhuǎn)義操作，??\d+??就表示至少有一位小數(shù)位。測試結(jié)果如下：
校驗一個數(shù)字是不是一個金額：??/^\d+(.\d{2})?$/??。
八、實用工具
1、Regex101
Regex101 是學(xué)習(xí)正則表達(dá)式最有效的工具網(wǎng)站之一。在REGULAR EXPRESSION欄中可以輸入正則表達(dá)式，可以在輸入框右側(cè)選擇需要的修飾符，在下面的TEST STRING欄中輸入要測試的字符串，即可顯示出匹配到的結(jié)果。在右側(cè)的EXPLANATION區(qū)域會顯示出對輸入的正則表達(dá)式的詳細(xì)解釋。右下角的 QUICK REFERENCE 欄會顯示正則表達(dá)式速查表。
Regex101 還支持在上面練習(xí)編寫正則表達(dá)式：
可以在上面搜索一些正則表達(dá)式的庫：
除此之外，我們還可以使用 RegexDebugger 來跟蹤匹配的過程。更多功能可以在Regex101 上進行探索。
官網(wǎng)：https://regex101.com/。
2、RegExr
RegExr 是一個基于 JavaScript 開發(fā)的在線工具，用來創(chuàng)建、測試和學(xué)習(xí)正則表達(dá)式。它是一個開源的工具，具有以下特性：
- 輸入時，結(jié)果會實時更新。
- 支持 JavaScript 和 PHP/PCRE RegEx。
- 將匹配項或表達(dá)式移至詳細(xì)信息。
- 保存并與他人共享表達(dá)式。
- 使用工具探索結(jié)果。
- 瀏覽參考以獲取幫助和示例。
- 在編輯器中使用 cmd-Z/Y 撤消和重做。
- 官網(wǎng)：https://regexr.com/
3、Regex Pal
Regexpal 是一個基于 Javascript 的在線正則表達(dá)式驗證工具。它的頁面非常簡潔，只有兩個輸入框，上面的輸入框中可以輸入正則表達(dá)式（匹配規(guī)則），下面的輸入框可以輸入待匹配的數(shù)據(jù)。此外，根據(jù)具體要求，還可以設(shè)置忽略大小寫、多行匹配等參數(shù)。
官網(wǎng)：https://www.regexpal.com/、
4、Regex-Vis
Regex-Vis 是一個輔助學(xué)習(xí)、編寫和驗證正則的工具。它不僅能對正則進行可視化展示，而且提供可視編輯正則的能力。在輸入一個正則表達(dá)式后，會生成它的可視化圖形。然后可以點選或框選圖形中的單個或多個節(jié)點，再在右側(cè)操作面板對其進行操作，具體操作取決于節(jié)點的類型，比如在其右側(cè)插入空節(jié)點、為節(jié)點編組、為節(jié)點增加量詞等。
官網(wǎng)：https://regex-vis.com/。
5、Regex previewer
Regex previewer 是一個 VScode 插件，在插件市場搜索名稱即可安裝。當(dāng)我們在編寫正則表達(dá)式時，可以直接使用快捷鍵 Ctrl+Alt+M （windows）或者 ???+?+M??（Mac）在編輯器右側(cè)啟動一個標(biāo)簽頁，我們可以在這個標(biāo)簽頁寫一寫測試用例，用來測試我們寫的正則表達(dá)式，寫完字符串用例之后，點擊我們編寫的正則表達(dá)式上方的 Test Regex...即可，這樣右側(cè)匹配到字符就會高亮顯示了，如下圖：
本文名稱：一篇帶給你正則表達(dá)式完整指南
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/coidegs.html
