本號是《現代 JavaScript 教程》^[1]官方微信公眾號

模式和修飾符

正則表達式是提供了一種在文本中進行搜索和替換的強大的方式的模式。

在 JavaScript 中，我們可以通過 RegExp^[2] 對象使用它們，也可以與字符串方法結合使用。

正則表達式

正則表達式（可叫作 "regexp"，或 "reg"）包擴 模式 和可選的 修飾符。

有兩種創建正則表達式對象的語法。

較長一點的語法：

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

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

regexp?=?/pattern/;?//?沒有修飾符 regexp?=?/pattern/gmi;?//?帶有修飾符?g、m?和?i（后面會講到）

斜線 /.../ 告訴 JavaScript 我們正在創建一個正則表達式。它的作用與字符串引號的作用相同。

在這兩種情況下，regexp 都會成為內建類 RegExp 的一個實例。

這兩種語法之間的主要區別在于，使用斜線 /.../ 的模式不允許插入表達式（如帶有 ${...} 的字符串模板）。它是完全靜態的。

在我們寫代碼時就知道正則表達式時則會使用斜線的方式 —— 這是最常見的情況。當我們需要從動態生成的字符串“動態”創建正則表達式時，更經常使用 new RegExp。例如：

let?tag?=?prompt("What?tag?do?you?want?to?find?",?"h2");let?regexp?=?new?RegExp(`<${tag}>`);?//?如果在上方輸入到?prompt?中的答案是?"h2"，則與?/<h2>/?相同

修飾符

正則表達式可能會有的會影響搜索結果的修飾符。

在 JavaScript 中，有 6 個修飾符：

i：使用此修飾符后，搜索時不區分大小寫：A 和 a 之間沒有區別（請參見下面的示例）。

g：使用此修飾符后，搜索時會尋找所有的匹配項 —— 沒有它，則僅返回第一個匹配項。

m：多行模式（詳見 錨點 ^ $ 的多行模式，修飾符 "m"^[3]）。

s：啟用 "dotall" 模式，允許點 . 匹配換行符 \n（在 字符類^[4] 中有詳細介紹）。

u：開啟完整的 Unicode 支持。該修飾符能夠正確處理代理對。詳見 [Unicode：修飾符 "u" 和類 \p{...}](https://zh.javascript.info/regexp-unicode "Unicode：修飾符 "u" 和類 \p{...}")。

y：粘滯模式，在文本中的確切位置搜索（詳見 [粘性標志 "y"，在位置處搜索](https://zh.javascript.info/regexp-sticky "粘性標志 "y"，在位置處搜索")）

顏色

接下來，各部分的顏色如下：

• 正則表達式 —— red

• 字符串（我們搜索的地方）—— blue

• 結果 —— green

搜索：str.match

正如前面所提到的，將正則表達式和字符串方法結合一起使用。

str.match(regexp) 方法在字符串 str 中尋找 regexp 的所有匹配項。

它有 3 種工作模式：

如果正則表達式具有修飾符 g，它返回一個由所有匹配項所構成的數組：

let?str?=?"We?will,?we?will?rock?you";alert(?str.match(/we/gi)?);?//?We,we（由兩個匹配的子字符串構成的數組）

請注意，We 和 we 都被找到了，因為修飾符 i 使得正則表達式在進行搜索時不區分大小寫。

如果沒有這樣的修飾符，它則會以數組形式返回第一個匹配項，索引 0 處保存著完整的匹配項，返回的結果的屬性中還有一些其他詳細信息：

let?str?=?"We?will,?we?will?rock?you";let?result?=?str.match(/we/i);?//?沒有修飾符?galert(?result[0]?);?????//?We（第一個匹配項） alert(?result.length?);?//?1//?詳細信息： alert(?result.index?);??//?0（匹配項的位置） alert(?result.input?);??//?We?will,?we?will?rock?you（源字符串）

如果正則表達式中有一部分內容被包在括號里，那么返回的數組可能會有 0 以外的索引。我們將在 捕獲組^[5] 中學習這部分相關內容。

最后，如果沒有匹配項，則返回 null（無論是否有修飾符 g）。

這是一個非常重要的細微差別。如果沒有匹配項，我們不會收到一個空數組，而是會收到 null。忘了這一點可能會導致錯誤，例如：

let?matches?=?"JavaScript".match(/HTML/);?//?=?nullif?(!matches.length)?{?//?Error:?Cannot?read?property?'length'?of?nullalert("Error?in?the?line?above"); }

如果我們希望結果始終是一個數組，我們可以這樣寫：

let?matches?=?"JavaScript".match(/HTML/)?||?[];if?(!matches.length)?{alert("No?matches");?//?現在可以了 }

替換：str.replace

str.replace(regexp, replacement) 方法使用 replacement 替換在字符串 str 中找到的 regexp 的匹配項（如果帶有修飾符 g 則替換所有匹配項，否則只替換第一個）。

例如：

//?沒有修飾符?g alert(?"We?will,?we?will".replace(/we/i,?"I")?);?//?I?will,?we?will//?帶有修飾符?g alert(?"We?will,?we?will".replace(/we/ig,?"I")?);?//?I?will,?I?will

第二個參數是字符串 replacement。我們可以在其中使用特殊的字符組合來對匹配項進行插入：

符號在替換字符串中的行為

$&	插入全部匹配項的內容
$`	插入匹配項前面的一段字符串
$'	插入匹配項后面的一段字符串
$n	如果 n 是一個 1-2 位數，則會插入第 n 個括號中的內容，詳見 捕獲組[6]
$<name>	插入名稱為 name 的括號中的內容，詳見 捕獲組[7]
$$	插入字符 $

帶有 $& 的一個示例：

alert(?"I?love?HTML".replace(/HTML/,?"$&?and?JavaScript")?);?//?I?love?HTML?and?JavaScript

測試：regexp.test

regexp.test(str) 方法尋找至少一個匹配項，如果找到了，則返回 true，否則返回 false。

let?str?=?"I?love?JavaScript"; let?regexp?=?/LOVE/i;alert(?regexp.test(str)?);?//?true

在后面的章節中，我們會學習更多正則表達式，通過更多的例子，也會遇到其他的方法。

關于這些方法的完整信息請見 正則表達式（RegExp）和字符串（String）的方法^[8]。

總結

• 正則表達式由模式和可選擇修飾符構成：g、i、m、u、s 和 y。

• 沒有修飾符和特殊符號（稍后我們會學到），那么正則表達式的搜索和子字符串的搜索相同。

• str.match(regexp) 方法尋找匹配項：如果帶有修飾符 g，則會返回所有匹配項，否則只會返回第一個匹配項。

• str.replace(regexp, replacement) 方法使用 replacement 替換 regexp 的匹配項：如果帶有修飾符 g，則會替換所有匹配項，否則只會替換第一個匹配項。

• regexp.test(str) 方法用于測試，如果找到至少一個匹配項則返回 true，否則返回 false。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程^[9]。

在線免費閱讀：https://zh.javascript.info

參考資料

[1]

《現代 JavaScript 教程》: https://zh.javascript.info/

[2]

RegExp: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/RegExp

[3]

錨點 ^ $ 的多行模式，修飾符 'm': https://zh.javascript.info/regexp-multiline-mode

[4]

字符類: https://zh.javascript.info/regexp-character-classes

[5]

捕獲組: https://zh.javascript.info/regexp-groups

[6]

捕獲組: https://zh.javascript.info/regexp-groups

[7]

捕獲組: https://zh.javascript.info/regexp-groups

[8]

正則表達式（RegExp）和字符串（String）的方法: https://zh.javascript.info/regexp-methods

[9]

React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources

總結

以上是生活随笔為你收集整理的正则表达式系列之 —— 模式（Patterns）和修饰符（flags）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。