How to Correctly Access Matched Groups in JavaScript Regular Expressions?

How to Access Matched Groups in a JavaScript Regular Expression

Accessing the subgroups captured by a regular expression in JavaScript can be achieved using the exec() method. This method returns an Array-like object containing the matches made by the expression.

To illustrate, consider the following example:

var myString = "something format_abc"; // Obtain "abc"

const arr = /(?:^|\s)format_(.*?)(?:\s|$)/.exec(myString);

console.log(arr); // Outputs: [" format_abc", "abc"]
console.log(arr[1]); // Outputs: undefined (the issue)
console.log(arr[0]); // Outputs: format_undefined (another issue)

The expected output is to obtain the subgroup "abc" as the second element of the arr array. However, accessing arr[1] and arr[0] leads to undefined and incorrect values, respectively.

Resolving the Undefined Output:

The lack of a value in arr[1] is due to the .*? non-greedy quantifier used in the regular expression. This quantifier captures the minimum number of characters possible, resulting in the string "format_abc" without the delimiter.

To fix this, use a greedy quantifier .* instead:

/(?:^|\s)format_(.*)(?:\s|$)/

Correcting the Incorrect String Output:

The arr[0] issue arises from the use of the console's printf-like formatting. The special character % in format_%A attempted to substitute the value of the next parameter, which was missing.

To fix this, escape the % in the regular expression:

/(?:^|\s)format_(.*?)(?:\s|$)/

With these modifications, the correct output is achieved:

[" format_abc", "abc"]
console.log(arr[1]); // Outputs: "abc"
console.log(arr[0]); // Outputs: " format_abc"

Accessing Matched Groups via matchAll() (ECMAScript 2020 and Later):

The String.prototype.matchAll() method provides a modern and more intuitive approach to iterating over multiple matches in a string. It returns an iterator that can be used as follows:

const string = "something format_abc";
const regexp = /(?:^|\s)format_(.*?)(?:\s|$)/g;
const matches = string.matchAll(regexp);

for (const match of matches) {
  console.log(match);
  console.log(match.index);
}

The above is the detailed content of How to Correctly Access Matched Groups in JavaScript Regular Expressions?. For more information, please follow other related articles on the PHP Chinese website!