Javascript 正則表達(dá)式和字符串的方法

在本文中，我們將深入介紹與正則表達(dá)式配合使用的各種方法。

str.match(regexp)

str.match(regexp) 方法在字符串 str 中查找 regexp 的匹配項(xiàng)。

它有 3 種模式：

1. 如果 regexp 不帶有修飾符 g，則它以數(shù)組的形式返回第一個(gè)匹配項(xiàng)，其中包含捕獲組和屬性 index（匹配項(xiàng)的位置）、input（輸入字符串，等于 str）：

   let str = "I love JavaScript";
   
   let result = str.match(/Java(Script)/);
   
   alert( result[0] );     // JavaScript（完全匹配）
   alert( result[1] );     // Script（第一個(gè)分組）
   alert( result.length ); // 2
   
   // 其他信息：
   alert( result.index );  // 7（匹配位置）
   alert( result.input );  // I love JavaScript（源字符串）

2. 如果 regexp 帶有修飾符 g，則它將返回一個(gè)包含所有匹配項(xiàng)的數(shù)組，但不包含捕獲組和其它詳細(xì)信息。

   let str = "I love JavaScript";
   
   let result = str.match(/Java(Script)/g);
   
   alert( result[0] ); // JavaScript
   alert( result.length ); // 1

3. 如果沒(méi)有匹配項(xiàng)，則無(wú)論是否帶有修飾符 g，都將返回 null。

   這是一個(gè)重要的細(xì)微差別。如果沒(méi)有匹配項(xiàng)，我們得到的不是一個(gè)空數(shù)組，而是 null。忘記這一點(diǎn)很容易出錯(cuò)，例如：

   let str = "I love JavaScript";
   
   let result = str.match(/HTML/);
   
   alert(result); // null
   alert(result.length); // Error: Cannot read property 'length' of null

   如果我們希望結(jié)果是一個(gè)數(shù)組，我們可以這樣寫(xiě)：

   let result = str.match(regexp) || [];

str.matchAll(regexp)

最近新增的特性

這是一個(gè)最近添加到 JavaScript 的特性。 舊式瀏覽器可能需要 polyfills.

方法 str.matchAll(regexp) 是 str.match 的“更新、改進(jìn)”的變體。

它主要用來(lái)搜索所有組的所有匹配項(xiàng)。

與 match 相比有 3 個(gè)區(qū)別：

1. 它返回一個(gè)包含匹配項(xiàng)的可迭代對(duì)象，而不是數(shù)組。我們可以用 ?Array.from? 將其轉(zhuǎn)換為一個(gè)常規(guī)數(shù)組。
2. 每個(gè)匹配項(xiàng)均以一個(gè)包含捕獲組的數(shù)組形式返回（返回格式與不帶修飾符 ?g? 的 ?str.match? 相同）。
3. 如果沒(méi)有結(jié)果，則返回的是一個(gè)空的可迭代對(duì)象而不是 ?null?。

用法示例：

let str = '<h1>Hello, world!</h1>';
let regexp = /<(.*?)>/g;

let matchAll = str.matchAll(regexp);

alert(matchAll); // [object RegExp String Iterator]，不是數(shù)組，而是一個(gè)可迭代對(duì)象

matchAll = Array.from(matchAll); // 現(xiàn)在是數(shù)組了

let firstMatch = matchAll[0];
alert( firstMatch[0] );  // <h1>
alert( firstMatch[1] );  // h1
alert( firstMatch.index );  // 0
alert( firstMatch.input );  // <h1>Hello, world!</h1>

如果我們用 for..of 來(lái)遍歷 matchAll 的匹配項(xiàng)，那么我們就不需要 Array.from 了。

str.split(regexp|substr, limit)

使用正則表達(dá)式（或子字符串）作為分隔符來(lái)分割字符串。

我們可以用 ?split? 來(lái)分割字符串，像這樣：

alert('12-34-56'.split('-')) // 數(shù)組 ['12', '34', '56']

但同樣，我們也可以用正則表達(dá)式：

alert('12, 34, 56'.split(/,\s*/)) // 數(shù)組 ['12', '34', '56']

str.search(regexp)

方法 str.search(regexp) 返回第一個(gè)匹配項(xiàng)的位置，如果沒(méi)找到，則返回 -1：

let str = "A drop of ink may make a million think";

alert( str.search( /ink/i ) ); // 10（第一個(gè)匹配位置）

重要限制：search 僅查找第一個(gè)匹配項(xiàng)。

如果我們需要其他匹配項(xiàng)的位置，則應(yīng)使用其他方法，例如用 str.matchAll(regexp) 查找所有位置。

str.replace(str|regexp, str|func)

這是用于搜索和替換的通用方法，是最有用的方法之一。它是搜索和替換字符串的瑞士軍刀。

我們可以在不使用正則表達(dá)式的情況下使用它來(lái)搜索和替換子字符串：

// 用冒號(hào)替換連字符
alert('12-34-56'.replace("-", ":")) // 12:34-56

不過(guò)有一個(gè)陷阱。

當(dāng) replace 的第一個(gè)參數(shù)是字符串時(shí)，它只替換第一個(gè)匹配項(xiàng)。

你可以在上面的示例中看到：只有第一個(gè) "-" 被替換為了 ":"。

如要找到所有的連字符，我們不應(yīng)該用字符串 "-"，而應(yīng)使用帶 g 修飾符的正則表達(dá)式 /-/g：

// 將所有連字符都替換為冒號(hào)
alert( '12-34-56'.replace( /-/g, ":" ) )  // 12:34:56

第二個(gè)參數(shù)是替換字符串。我們可以在其中使用特殊字符：

例如：

let str = "John Smith";

// 交換名字和姓氏
alert(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John

對(duì)于需要“智能”替換的場(chǎng)景，第二個(gè)參數(shù)可以是一個(gè)函數(shù)。

每次匹配都會(huì)調(diào)用這個(gè)函數(shù)，并且返回的值將作為替換字符串插入。

該函數(shù) func(match, p1, p2, ..., pn, offset, input, groups) 帶參數(shù)調(diào)用：

1. ?match? —— 匹配項(xiàng)，
2. ?p1, p2, ..., pn? —— 捕獲組的內(nèi)容（如有），
3. ?offset? —— 匹配項(xiàng)的位置，
4. ?input? —— 源字符串，
5. ?groups? —— 具有命名的捕獲組的對(duì)象。

如果正則表達(dá)式中沒(méi)有括號(hào)，則只有 3 個(gè)參數(shù)：func(str, offset, input)。

例如，將所有匹配項(xiàng)都大寫(xiě)：

let str = "html and css";

let result = str.replace(/html|css/gi, str => str.toUpperCase());

alert(result); // HTML and CSS

將每個(gè)匹配項(xiàng)替換為其在字符串中的位置：

alert("Ho-Ho-ho".replace(/ho/gi, (match, offset) => offset)); // 0-3-6

在下面的示例中，有兩對(duì)括號(hào)，因此將使用 5 個(gè)參數(shù)調(diào)用替換函數(shù)：第一個(gè)是完全匹配項(xiàng)，然后是 2 對(duì)括號(hào)，然后是（在示例中未使用）匹配位置和源字符串：

let str = "John Smith";

let result = str.replace(/(\w+) (\w+)/, (match, name, surname) => `${surname}, ${name}`);

alert(result); // Smith, John

如果有許多組，用 rest 參數(shù)（…）可以很方便的訪問(wèn)：

let str = "John Smith";

let result = str.replace(/(\w+) (\w+)/, (...match) => `${match[2]}, ${match[1]}`);

alert(result); // Smith, John

或者，如果我們使用的是命名組，則帶有它們的 groups 對(duì)象始終是最后一個(gè)對(duì)象，所以我們可以像這樣獲取它：

let str = "John Smith";

let result = str.replace(/(?<name>\w+) (?<surname>\w+)/, (...match) => {
  let groups = match.pop();

  return `${groups.surname}, ${groups.name}`;
});

alert(result); // Smith, John

使用函數(shù)可以為我們提供終極替換功能，因?yàn)樗梢垣@取匹配項(xiàng)的所有信息，可以訪問(wèn)外部變量，可以做任何事。

str.replaceAll(str|regexp, str|func)

這個(gè)方法與 str.replace 本質(zhì)上是一樣的，但有兩個(gè)主要的區(qū)別：

1. 如果第一個(gè)參數(shù)是一個(gè)字符串，它會(huì)替換 所有出現(xiàn)的 和第一個(gè)參數(shù)相同的字符串?，?而 replace 只會(huì)替換 第一個(gè)。
2. 如果第一個(gè)參數(shù)是一個(gè)沒(méi)有修飾符 g 的正則表達(dá)式，則會(huì)報(bào)錯(cuò)。帶有修飾符 g，它的工作方式與 replace 相同。

replaceAll 的主要用途是替換所有出現(xiàn)的字符串。

像這樣：

// 使用冒號(hào)替換所有破折號(hào)
alert('12-34-56'.replaceAll("-", ":")) // 12:34:56

regexp.exec(str)

regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配項(xiàng)。與以前的方法不同，它是在正則表達(dá)式而不是在字符串上調(diào)用的。

它的行為取決于正則表達(dá)式是否具有修飾符 g。

如果沒(méi)有修飾符 g，則 regexp.exec(str) 會(huì)返回與 第一個(gè)匹配項(xiàng)，就像 str.match(regexp) 那樣。這種行為并沒(méi)有帶來(lái)任何新的東西。

但是，如果有修飾符 g，那么：

• 調(diào)用 regexp.exec(str) 會(huì)返回第一個(gè)匹配項(xiàng)，并將緊隨其后的位置保存在屬性 regexp.lastIndex 中。
• 下一次這樣的調(diào)用會(huì)從位置 regexp.lastIndex 開(kāi)始搜索，返回下一個(gè)匹配項(xiàng)，并將其后的位置保存在 regexp.lastIndex 中。
• ……以此類(lèi)推。
• 如果沒(méi)有匹配項(xiàng)，則 regexp.exec 返回 null，并將 regexp.lastIndex 重置為 0。

因此，重復(fù)調(diào)用會(huì)一個(gè)接一個(gè)地返回所有匹配項(xiàng)，使用屬性 regexp.lastIndex 來(lái)跟蹤當(dāng)前搜索位置。

過(guò)去，在將 str.matchAll 方法添加到 JavaScript 之前，會(huì)在循環(huán)中調(diào)用 regexp.exec 來(lái)獲取組的所有匹配項(xiàng)：

let str = 'More about JavaScript at https://javascript.info';
let regexp = /javascript/ig;

let result;

while (result = regexp.exec(str)) {
  alert( `Found ${result[0]} at position ${result.index}` );
  // 在位置 11 找到了 JavaScript，然后
  // 在位置 33 找到了 javascript
}

這現(xiàn)在也有效，盡管對(duì)于較新的瀏覽器 str.matchAll 通常更方便。

我們可以通過(guò)手動(dòng)設(shè)置 lastIndex，用 regexp.exec 從給定位置進(jìn)行搜索。

例如：

let str = 'Hello, world!';

let regexp = /\w+/g; // 沒(méi)有修飾符 "g"，lastIndex 屬性會(huì)被忽略
regexp.lastIndex = 5; // 從第 5 個(gè)位置搜索（從逗號(hào)開(kāi)始）

alert( regexp.exec(str) ); // world

如果正則表達(dá)式帶有修飾符 y，則搜索將精確地在 regexp.lastIndex 位置執(zhí)行，不會(huì)再進(jìn)一步。

讓我們將上面示例中的 g 修飾符替換為 y?，F(xiàn)在沒(méi)有找到匹配項(xiàng)，因?yàn)樵谖恢?nbsp;5 處沒(méi)有單詞：

let str = 'Hello, world!';

let regexp = /\w+/y;
regexp.lastIndex = 5; // 在位置 5 精確查找

alert( regexp.exec(str) ); // null

當(dāng)我們需要通過(guò)正則表達(dá)式在確切位置而不是其后的某處從字符串中“讀取”某些內(nèi)容時(shí)，這很方便。

regexp.test(str)

方法 regexp.test(str) 查找匹配項(xiàng)，然后返回 true/false 表示是否存在。

例如：

let str = "I love JavaScript";

// 這兩個(gè)測(cè)試相同
alert( /love/i.test(str) ); // true
alert( str.search(/love/i) != -1 ); // true

一個(gè)否定答案的例子：

let str = "Bla-bla-bla";

alert( /love/i.test(str) ); // false
alert( str.search(/love/i) != -1 ); // false

如果正則表達(dá)式帶有修飾符 g，則 regexp.test 從 regexp.lastIndex 屬性開(kāi)始查找并更新此屬性，就像 regexp.exec 一樣。

因此，我們可以用它從給定位置進(jìn)行查找：

let regexp = /love/gi;

let str = "I love JavaScript";

// 從位置 10 開(kāi)始搜索：
regexp.lastIndex = 10;
alert( regexp.test(str) ); // false（沒(méi)有匹配項(xiàng)）

相同的全局正則表達(dá)式在不同的源字符串上測(cè)試可能會(huì)失敗

如果我們?cè)诓煌脑醋址蠎?yīng)用相同的全局正則表達(dá)式，可能會(huì)出現(xiàn)錯(cuò)誤的結(jié)果，因?yàn)?nbsp;regexp.test 的調(diào)用會(huì)增加 regexp.lastIndex 屬性值，因此在另一個(gè)字符串中的搜索可能是從非 0 位置開(kāi)始的。

例如，這里我們?cè)谕晃谋旧险{(diào)用 regexp.test 兩次，而第二次調(diào)用失敗了：

let regexp = /javascript/g;  // （新建立的 regexp：regexp.lastIndex=0)

alert( regexp.test("javascript") ); // true（現(xiàn)在 regexp.lastIndex=10）
alert( regexp.test("javascript") ); // false

這正是因?yàn)樵诘诙€(gè)測(cè)試中 regexp.lastIndex 不為零。

如要解決這個(gè)問(wèn)題，我們可以在每次搜索之前設(shè)置 regexp.lastIndex = 0?；蛘?，不要在正則表達(dá)式上調(diào)用方法，而是使用字符串方法 str.match/search/...，這些方法不使用 lastIndex。