JavaScript - How to Access Matched Groups in Regular Expression?

Here are the different methods to access matched groups in JavaScript regular Expression(RegExp).

1. Using exec() Method

The exec() method returns an array with the entire match and captured groups, which you can access by their index in the result array.

let s = "The price is $50";
let regex = /(\d+)/;
let res = regex.exec(s);

console.log(res);
console.log(res[1]); 

[ '50', '50', index: 14, input: 'The price is $50', groups: undefined ]
50

• regex.exec(s) executes the regular expression on the string s.
• The first element of the result array is the full match, and result[1] gives the captured group (in this case, the digits).

2. Using match() Method with Global Flag

If you omit the g flag, match() will return an array of matched groups along with the full match.

let s = "I have 10 apples and 20 oranges";
let regex = /(\d+)/g;
let res = s.match(regex);

console.log(res); 

[ '10', '20' ]

• s.match(regex) returns an array with all matches of the pattern (\d+) in the string s.
• Each element in the array is a separate match of the captured digits.

3. Using match() Method Without the Global Flag

Without the g flag, match() gives you a detailed array with the entire match and captured groups.

let s = "My phone number is 12345";
let regex = /(\d+)/;
let res = s.match(regex);

console.log(res);
console.log(res[1]); 

[
  '12345',
  '12345',
  index: 19,
  input: 'My phone number is 12345',
  groups: undefined
]
12345

• s.match(regex) matches the first occurrence of the pattern.
• The full match is at result[0] and the captured group is at result[1].

4. Using String.prototype.replace() with a Callback Function

The replace() method allows you to access capturing groups through the callback function's parameters.

let s = "I have 100 dollars";
let regex = /(\d+)/;
let res = s.replace(regex, (match, g1) => {
    console.log(g1);
    return `Amount: ${g1}`;
});

console.log(res);

100
I have Amount: 100 dollars

• s.replace(regex, callback) replaces the first match with the string returned by the callback function.
• The captured group (in this case, the number 100) is passed as group1 to the callback function.

5. Using RegExp exec() Method

Using exec() with a global flag in a loop allows you to retrieve all matches and access their groups.

let s = "I have 10 apples and 20 oranges";
let regex = /(\d+)/g;
let match;

while ((match = regex.exec(s)) !== null) {
    console.log(`Matched: ${match[0]}, Captured group: ${match[1]}`);
}

Matched: 10, Captured group: 10
Matched: 20, Captured group: 20

• The exec() method is used in a loop to find all matches of the regex pattern.
• match[0] is the full match, and match[1] is the captured group.