/

How to Retrieve All Results of a Regex with Capturing Groups in JavaScript

How to Retrieve All Results of a Regex with Capturing Groups in JavaScript

If you find yourself needing to process multiple URLs within a string using a regular expression in JavaScript, capturing groups can come in handy. They allow you to extract specific parts of the matched pattern. In this article, we’ll explore how to retrieve all results of a regular expression with capturing groups.

Let’s start by examining how to get a single result using the match() method:

1
2
3
4
5
6
const text = 'hello1 bla bla hello2';
const regex = /hello\d/;
text.match(regex);
/*
[ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ]
*/

To get multiple results, you can use the g flag, which stands for global, to match all occurrences automatically:

1
2
3
4
const text = 'hello1 bla bla hello2';
const regex = /hello\d/g;
console.log(text.match(regex));
//[ 'hello1', 'hello2' ]

If you want a more detailed result set, you can utilize the matchAll() method, introduced in ES2020. This method returns an iterator object, so you’ll need to loop through the results to access them individually:

1
2
3
4
5
6
7
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 ]
*/

Now, let’s focus on capturing groups. Suppose you have a text that contains dates in the format of YYYY-MM-DD and you want to extract the year, month, and day values. You can achieve this using named capturing groups in your regular expression:

1
2
const text = '2015-01-02 2022-02-04 2040-12-02';
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g;

By using text.matchAll(regex) with this regex, you won’t obtain any information about the capturing groups:

1
2
3
4
5
6
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' ]
*/

However, if you utilize text.matchAll(regex), you can access the capturing group information:

1
2
3
4
5
6
7
8
9
10
11
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' } ]
*/

You can then extract the year information using the captured groups:

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", "regular expressions", "capturing groups"]