基礎入門
概念
正則表達式（Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規(guī)則的字符串搜索模式。搜索模式可用于文本搜索和文本替換。它用一系列字符定義搜索模式。
正則表達式的用途有很多，比如：
-
表單輸入驗證；
-
搜索和替換；
-
過濾大量文本文件（如日志）中的信息；
-
讀取配置文件；
-
網頁抓??；
-
處理具有一致語法的文本文件，例如 CSV。
創(chuàng)建
正則表達式的語法如下：
/正則表達式主體/修飾符(可選)先來看一個最基本的正則表達式：/處/，它只匹配到了字符串中的第一個“處”：
創(chuàng)建正則表達式的方式有兩種：
-
字面量：正則表達式直接放在
/ /之中：
const rex = /pattern/; -
構造函數(shù)：RegExp 對象表示正則表達式的一個實例：
const rex = new RegExp("pattern");這兩種方法的一大區(qū)別是對象的構造函數(shù)允許傳遞帶引號的表達式，通過這種方式就可以動態(tài)創(chuàng)建正則表達式。
通過這兩種方法創(chuàng)建出來的 Regex 對象都具有相同的方法和屬性：
let RegExp1 = /a|b/
let RegExp2 = new RegExp('a|b')
console.log(RegExp1) // 輸出結果：/a|b/
console.log(RegExp2) // 輸出結果：/a|b/RegExp 實例
實例方法
RegExp 實例置了test()和exec()?這兩個方法來校驗正則表達式。下面來分別看一下這兩個方法。
（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()用于檢索字符串中的正則表達式的匹配。該函數(shù)返回一個數(shù)組，其中存放匹配的結果。如果未找到匹配，則返回值為 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在當在全局正則表達式中使用?exec?時，每隔一次就會返回null，如圖：
在設置了 global 或 sticky 標志位的情況下（如 /foo/g or /foo/y），JavaScript RegExp 對象是有狀態(tài)的。他們會將上次成功匹配后的位置記錄在 lastIndex 屬性中。使用此特性，exec() 可用來對單個字符串中的多次匹配結果進行逐條的遍歷（包括捕獲到的匹配），而相比之下， String.prototype.match() 只會返回匹配到的結果。
為了解決這個問題，我們可以在運行每個exec命令之前將lastIndex賦值為 0：
實例屬性
RegExp 實例還內置了一些屬性，這些屬性可以獲知一個正則表達式的各方面的信息，但是用處不大。
| 屬性 | 描述 |
|---|---|
global |
布爾值，表示是否設置了g標志 |
ignoreCase |
布爾值，表示是否設置了i標志 |
lastIndex |
整數(shù)，表示開始搜索下一個匹配項的字符位置，從0算起 |
multiline |
布爾值，表示是否設置了m標志 |
source |
正則表達式的字符串表示，按照字面量形式而非傳入構造函數(shù)重大的字符串模式匹配 |
模式匹配
關于正則表達式最復雜的地方就是如何編寫正則規(guī)則了，下面就來看如何編寫正則表達式。
修飾符
正則表達式的修飾符是一種可以在正則表達式模式中添加的標記，用于修改搜索模式的行為。這些修飾符通常以單個字符形式出現(xiàn)在正則表達式的末尾，并且可以通過在正則表達式模式前添加該字符來啟用修飾符。
常見的修飾符如下：
-
g：表示全局模式，即運用于所有字符串； -
i：表示不區(qū)分大小寫，即匹配時忽略字符串的大小寫； -
m：表示多行模式，強制 $ 和 ^ 分別匹配每個換行符。
最開始的例子中，字符串中有兩個“處”，但是只匹配到了一個。這是因為正則表達式默認匹配第一個符合條件的字符。如果想要匹配所有符合條件的字符，就可以使用?g?修飾符：
/處/g這樣就匹配到了所有符合條件的字符：
i?修飾符就派上用場了。先來看下面的表達式：
/a/g在進行匹配時，它匹配到了字符串中所有的?a?字符。但是最開始的?A?是沒匹配到的，因為兩者大小寫不一致：
i?修飾符：
/a/gi這時所有的?a?都被匹配到了，無論是大寫還是小寫，總共匹配到了三個?a：
let regExp = new RegExp('[2b|^2b]', 'gi')
console.log(regExp) // 輸出結果：/[2b|^2b]/gi字符集合
如果我們想匹配 bat、cat 和 fat 這種類型的字符串該怎么辦？可以通過使用字符集合來做到這一點，用 [] 表示，它會匹配包含的任意一個字符。這里就可以使用/[bcf]at/ig：
當然，字符集也可以用來匹配數(shù)字：
字符范圍
如果我們想要在字符串中匹配所有以 at 結尾的單詞，最直接的方式是使用字符集，并在其中提供所有的字母。對于這種在一個范圍中的字符， 就可以直接定義字符范圍，用-表示。它用來匹配指定范圍內的任意字符。這里就可以使用/[a-z]at/ig：
常見的使用范圍的方式如下：
-
部分范圍：
[a-f]，匹配 a ?到 f 的任意字符； -
小寫范圍：
[a-z]，匹配 a 到 z 的任意字符； -
大寫范圍：
[A-Z]，匹配 A 到 Z 的任意字符； -
數(shù)字范圍：
[0-9]，匹配 0 到 9 的任意字符； -
符號范圍：
[#$%&@]； -
混合范圍：
[a-zA-Z0-9]，匹配所有數(shù)字、大小寫字母中的任意字符。
數(shù)量字符
如果想要匹配三個字母的單詞，根據上面我們學到的字符范圍，可以這樣來寫：
[a-z][a-z][a-z]這里我們匹配的三個字母的單詞，那如果想要匹配10個、20個字母的單詞呢？難道要一個個來寫范圍嗎？有一種更好的方法就是使用花括號{}來表示，來看例子：
其實匹配重復字符的完整語法是這樣的：{m,n}，它會匹配前面一個字符至少 m 次至多 n 次重復，{m}表示匹配 m 次，{m,}表示至少 m 次。
所以，當我們給5后面加上逗號時，就表示至少匹配五次：
當匹配次數(shù)為至少4次，至多5次時，匹配結果如下：
-
+：匹配前面一個表達式一次或者多次，相當于?{1,}； -
*：匹配前面一個表達式0次或者多次，相當于?{0,}； -
?：單獨使用匹配前面一個表達式零次或者一次，相當于?{0,1}，如果跟在量詞*、+、?、后面的時候將會使量詞變?yōu)榉秦澙纺Ｊ剑ūM量匹配少的字符），默認是使用貪婪模式。
來看一個簡單的例子，這里我們匹配的正則表達式為/a+/ig，結果如下：
/a{1,}/ig的匹配結果是一樣的：
/[a-z]+/ig就可以匹配任意長度的純字母單詞：
元字符
使用元字符可以編寫更緊湊的正則表達式模式。常見的元字符如下：
-
\d：相當于[0-9]，匹配任意數(shù)字； -
\D：相當于[^0-9]； -
\w：相當于[0-9a-zA-Z]，匹配任意數(shù)字、大小寫字母和下劃線； -
\W：相當于：[^0-9a-zA-Z]； -
\s：相當于[\t\v\n\r\f]，匹配任意空白符，包括空格，水平制表符\t，垂直制表符\v，換行符\n，回車符\r，換頁符\f； -
\S：相當于[^\t\v\n\r\f]，表示非空白符。
來看一個簡單的例子：
\d來匹配任意數(shù)字、字母和下劃線。這里就匹配到了7個連續(xù)四位的字符。
特殊字符
使用特殊字符可以編寫更高級的模式表達式，常見的特殊字符如下：
-
.：匹配除了換行符之外的任何單個字符； -
\：將下一個字符標記為特殊字符、或原義字符、或向后引用、或八進制轉義符； -
|：邏輯或操作符； -
[^]：取非，匹配未包含的任意字符。
來看一個簡單的例子，如果我們使用?/ab*/ig?進行匹配，結果就如下：
\?對其進行轉義：
ab*?了。
或匹配也很簡單，來看例子，匹配規(guī)則為：/ab|cd/ig，匹配結果如下：
ab?和?cd?字符。那如果想要匹配?sabz?或者scdz呢？開頭和結尾是相同的，只有中間的兩個字符是可選的。其實只需要給中間的或部分加上括號就可以了：
位置匹配
如果我們想匹配字符串中以某些字符結尾的單詞，以某些字符開頭的單詞該如何實現(xiàn)呢？正則表達式中提供了方法通過位置來匹配字符：
-
\b：匹配一個單詞邊界，也就是指單詞和空格間的位置； -
\B：匹配非單詞邊界； -
^：匹配開頭，在多行匹配中匹配行開頭； -
$：匹配結尾，在多行匹配中匹配行結尾； -
(?=p)：匹配 p 前面的位置； -
(?!=p)：匹配不是 p 前面的位置。
最常見的就是匹配開始和結束位置。先來看一個開始位置的匹配，這里使用?/^ex/igm?來匹配多行中以ex?開頭的行：
/e$/igm來匹配以 e 結尾的行：
\w+$?來匹配每一行的最后一個單詞：
m?修飾符開啟了多行模式。
使用?/(?=the)/ig?來匹配字符串中the前的面的位置：
我們可以使用\b來匹配單詞的邊界，匹配的結果如下：
\b\w+\b，匹配結果如下：
捕獲組
正則表達式中的“捕獲組”是指使用括號?()?將子模式括起來，以便于在搜索時同時匹配多個項或將匹配的內容單獨提取出來。組可以根據需要進行嵌套，形成復雜的匹配模式。
使用捕獲組，可以直接在正則表達式?/(Testing|tests) 123/ig?中匹配到 "Testing 123" 和 "Tests 123"，而不需要重復寫 "123" 的匹配項。
-
(...)：捕獲組，用于匹配任意三個字符。 -
(?:...)：非捕獲組，也是用于匹配任意三個字符，但不進行捕獲。
可以使用以下 JavaScript 將文本替換為Testing 234和tests 234：
const regex = /(Testing|tests) 123/ig;
let str = `
Testing 123
Tests 123
`;
str = str.replace(regex, '$1 234');
console.log(str);
// Testing 234
// Tests 234被括號包圍的子模式稱為“捕獲組”，捕獲組可以從匹配的字符串中提取出指定的部分并單獨使用。這里我們使用?$1?來引用第一個捕獲組?(Testing|tests)。也可以匹配多個組，比如同時匹配?(Testing|tests)?和?(123)。
const regex = /(Testing|tests) (123)/ig;
let str = `
Testing 123
Tests 123
`;
str = str.replace(regex, '$1 #$2');
console.log(str);
// Testing #123
// Tests #123"這只適用于捕獲組。如果把上面的正則表達式變成這樣：
/(?:Testing|tests) (123)/ig;那么只有一個被捕獲的組：(123)，與之前相同的代碼將輸出不同的結果：
const regex = /(?:Testing|tests) (123)/ig;
let str = `
Testing 123
Tests 123
`;
str = str.replace(regex, '$1');
console.log(str);
// 123
// 123修改后的正則表達式只有一個捕獲組?(123)。因為?(?: )?的語法用于創(chuàng)建非捕獲組，所以它不會將其內容作為一個捕獲組來使用。
命名捕獲組
雖然捕獲組非常有用，但是當有很多捕獲組時很容易讓人困惑。$3?和?$5?這些名字并不是一目了然的。為了解決這個問題，正則表達式引入了“命名捕獲組”的概念。例如，(?<name>...)?就是一個命名捕獲組，名為 "name"，用于匹配任意三個字符。
可以像這樣在正則表達式中使用它來創(chuàng)建一個名為 "num" 的組，用于匹配三個數(shù)字：
/Testing (?<num>\d{3})/然后，可以在替換操作中像這樣使用它：
const regex = /Testing (?<num>\d{3})/
let str = "Testing 123";
str = str.replace(regex, "Hello $<num>")
console.log(str); // "Hello 123"命名反向引用
有時候需要在查詢字符串中引用一個命名捕獲組，這就是“反向引用”的用武之地。
假設有一個字符串，其中包含多個單詞，我們想要找到所有出現(xiàn)兩次或以上的單詞?？梢允褂镁呙东@組和命名反向引用來實現(xiàn)。
const regex = /\b(?<word>\w+)\b(?=.*?\b\k<word>\b)/g;
const str = 'I like to eat pizza, but I do not like to eat sushi.';
const result = str.match(regex);
console.log(result); // like這里使用了具名捕獲組?(?<word>\w+)來匹配單詞，并將其命名為 "word"。然后使用命名反向引用?(?=.*?\b\k<word>\b)?來查找文本中是否存在具有相同內容的單詞。
前瞻組和后顧組
前瞻組（Lookahead）和后顧組（Lookbehind）是正則表達式中非常有用的工具，它們用于在匹配過程中進行條件約束，而不會實際匹配這些約束的內容。它們使得我們可以更精確地指定匹配模式。
前瞻組：
-
正向前瞻（
(?=...)）：用于查找在某個位置后面存在的內容。例如，A(?=B)?可以匹配 "A"，但只有在后面跟著 "B" 時才進行匹配。 -
負向前瞻（
(?!...)）：用于查找在某個位置后面不存在的內容。例如，A(?!B)?可以匹配 "A"，但只有在后面不跟著 "B" 時才進行匹配。
后顧組：
-
正向后顧（
(?<=...)）：用于查找在某個位置前面存在的內容。例如，(?<=A)B?可以匹配 "B"，但只有在其前面跟著 "A" 時才進行匹配。 -
負向后顧（
(?<!...)）：用于查找在某個位置前面不存在的內容。例如，(?<!A)B?可以匹配 "B"，但只有在其前面不跟著 "A" 時才進行匹配。
這些前瞻組和后顧組可以用于各種場景，例如：
-
在匹配郵箱地址時，使用正向前瞻來確保地址的結尾是以特定的域名結尾。
-
在匹配密碼時，使用正向前瞻來確保密碼滿足特定的復雜度要求。
-
在提取文本中的日期時，使用正向后顧來確保日期的前面有特定的前綴。
例如，使用負向前瞻可以匹配 BC，但不會匹配 BA。
/B(?!A)/
/^(?!Test).*$/gm
Hello?和?Other，但無法匹配?Testing 123?和?Tests 123。
同樣，可以將其切換為正向前瞻，以強制字符串必須以“Test”開頭：
/^(?=Test).*$/gm
字符串方法
在 JavaScript 內置了 6 個常用的方法是支持正則表達式的，下面來分別看看這些方法。
search()
search()??方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置。如果沒有找到任何匹配的子串，則返回 -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)); // 輸出結果：0
console.log(str.search(regex2)); // 輸出結果：8
console.log(str.search(regex3)); // 輸出結果：-1可以看到，search()?方法只會返回匹配到的第一個字符的索引值，當沒有匹配到相應的值時，就會返回-1。
match()
match()?方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。如果沒有找到任何匹配的文本，?match()?將返回?null。否則，它將返回一個數(shù)組，其中存放了與它找到的匹配文本有關的信息。
const regex1 = /a/ig;
const regex2 = /a/i;
const regex3 = /m/ig;
const str = "Action speak louder than words";
console.log(str.match(regex1)); // 輸出結果：['A', 'a', 'a']
console.log(str.match(regex2)); // 輸出結果：['A', index: 0, input: 'Action speak louder than words', groups: undefined]
console.log(str.match(regex3)); // 輸出結果：null可以看到，當沒有?g?修飾符時，就只能在字符串中執(zhí)行一次匹配，如果想要匹配所有符合條件的值，就需要添加?g?修飾符。
matchAll()
matchAll()?方法返回一個包含所有匹配正則表達式的結果及分組捕獲組的迭代器。因為返回的是遍歷器，所以通常使用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ù)是一個正則表達式對象，如果傳的參數(shù)不是一個正則表達式對象，則會隱式地使用?new RegExp(obj)?將其轉換為一個?RegExp?。另外，RegExp必須是設置了全局模式g的形式，否則會拋出異常?TypeError。
replace()
replace()?用于在字符串中用一些字符串替換另一些字符串，或替換一個與正則表達式匹配的子串。
const regex = /A/g;
const str = "Action speak louder than words";
console.log(str.replace(regex, 'a')); // 輸出結果：action speak louder than words可以看到，第一個參數(shù)中的正則表達式匹配到了字符串的第一個大寫的 A，并將其替換為了第二個參數(shù)中的小寫的 a。
replaceAll()
replaceAll()?方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串，該函數(shù)會替換所有匹配到的子字符串。
const regex = /a/g;
const str = "Action speak louder than words";
console.log(str.replaceAll(regex, 'A')); // 輸出結果：Action speAk louder thAn words需要注意，當使用一個?regex?時，您必須設置全局（"g"）標志， 否則，它將引發(fā)?TypeError："必須使用全局 RegExp 調用 replaceAll"。
split()
split()?方法用于把一個字符串分割成字符串數(shù)組。其第一個參數(shù)是一個字符串或正則表達式，從該參數(shù)指定的地方分割字符串。文章來源：http://www.zghlxwxcb.cn/news/detail-710506.html
const regex = / /gi;
const str = "Action speak louder than words";
console.log(str.split(regex)); // 輸出結果：['Action', 'speak', 'louder', 'than', 'words']這里的?regex?用來匹配空字符串，所以最終在字符串的每個空格處將字符串拆成了數(shù)組。文章來源地址http://www.zghlxwxcb.cn/news/detail-710506.html
到了這里，關于學習正則表達式的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
