/

如何在 JavaScript 中使用捕獲組擷取正則表達式的所有結果

如何在 JavaScript 中使用捕獲組擷取正則表達式的所有結果

我面臨了這樣的任務

基本上，我有一個包含多個URL的字符串，我想使用正則表達式處理它們。

這個正則表達式使用了捕獲組，非常方便。

那麼，讓我們從獲取單個結果開始：

1
2
3
4
5
6
7
8
9
const text = 'hello1 bla bla hello2'

const regex = /hello\d/

text.match(regex)

/*
[ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ]
*/

使用 g標誌可以從正則表達式中獲取多個結果，而且這是自動進行的，但現在 match() 的結果不同，只返回匹配的結果：

1
2
3
4
5
6
const text = 'hello1 bla bla hello2'

const regex = /hello\d/g

console.log(text.match(regex))
//[ 'hello1', 'hello2' ]

使用 ES2020中的 matchAll() 方法可以獲得更詳細的結果集。

該方法返回一個迭代器對象，所以需要使用循環來遍歷結果：

1
2
3
4
5
6
7
8
for (let match of text.matchAll(regex)) {
 console.log(match)
}

/*
[ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ]
[ 'hello2', index: 15, input: 'hello1 bla bla hello2', groups: undefined ]
*/

現在讓我們談談捕獲組。

假設您的文本包含如下格式的日期：

1
const text = '2015-01-02 2022-02-04 2040-12-02'

並且您有一個正則表達式來匹配這個日期格式，因為您可能想要獲取年份的參考：

1
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g

這裡使用了 命名捕獲組。

現在使用 text.match(regex) 將不會提供有關組的任何信息：

1
2
3
4
5
6
7
8
9
const text = '2015-01-02 2022-02-04 2040-12-02'

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g

text.match(regex)

/*
[ '2015-01-02', '2022-02-04', '2040-12-02' ]
*/

但是您可以使用 text.matchAll(regex) 獲取這些信息：

1
2
3
4
5
6
7
8
9
10
11
12
const text = '2015-01-02 2022-02-04 2040-12-02'

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g
for (let match of text.matchAll(regex)) {
 console.log(match)
}

/*
[ '2015-01-02', '2015', '01', '02', index: 0, input: '2015-01-02 2022-02-04 2040-12-02', groups: [Object: null prototype] { year: '2015', month: '01', day: '02' } ]
[ '2022-02-04', '2022', '02', '04', index: 11, input: '2015-01-02 2022-02-04 2040-12-02', groups: [Object: null prototype] { year: '2022', month: '02', day: '04' } ]
[ '2040-12-02', '2040', '12', '02', index: 22, input: '2015-01-02 2022-02-04 2040-12-02', groups: [Object: null prototype] { year: '2040', month: '12', day: '02' } ]
*/

因此，您可以像這樣提取年份信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
const text = '2015-01-02 2022-02-04 2040-12-02'

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g

for (let match of text.matchAll(regex)) {
 console.log(match.groups.year)
}

/*
'2015'
'2022'
'2040'
*/

tags: [“JavaScript”, “regex”, “capturing groups”, “matchAll”, “match”]