How to get retrieve all results of a regex with capturing groups in JS
I had this job to do
Basically I had a string that contained multiple URLs and I wanted to process them all using a regular expression.
This regular expression used capturing groups, which are great.
So, let’s start from getting one single result:
const text = 'hello1 bla bla hello2'
const regex = /hello\d/
text.match(regex)
/*
[ 'hello1', index: 0, input: 'hello1 bla bla hello2', groups: undefined ]
*/
Getting multiple results from a regex can be done using the g
flag and it’s automatic, but now the result of match()
is different, just the matched result:
const text = 'hello1 bla bla hello2'
const regex = /hello\d/g
console.log(text.match(regex))
//[ 'hello1', 'hello2' ]
Using matchAll()
(an ES2020 feature) you can get a more detailed result set.
That returns an iterator object, so you need to use a loop to go through the results:
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 ]
*/
Let’s talk about capturing groups.
Say you have a text containing dates like this:
const text = '2015-01-02 2022-02-04 2040-12-02'
and you have a regex to match that date pattern, because maybe you want to get the years references:
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g
This uses named capturing groups.
Using text.match(regex)
now will not give you any information about the groups:
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' ]
*/
but you can get this information using text.matchAll(regex)
:
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' } ]
*/
So you could extract the year information like this:
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'
*/
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025