JavaScript matchAll() Method: Get All Matches with Capturing Group

In this tutorial, you will learn about the matchAll() string method in JavaScript.

Limitation Of match() Method

The match() method is good when used without the g (global) flag but has a limitation when you use it with the g flag.

Without the g flag, the match() method returns the first match with all the capturing groups but with the g flag it returns all the matches but no other related data like capturing group.

const str = "learning to code is learning to create and innovate";
// with g flag
const regexp1 = /l((earn)ing)/g;
const match1 = str.match(regexp1);
console.log(match1); // [ "learning", "learning" ]

// removing g flag
const regexp2 = /l((earn)ing)/;
const match2 = str.match(regexp2);
console.log(match2, match2.index, match2.input); // [ "learning", "earn" ]

Run the above program in the console and check the return value with and without the g flag. If you remove the g flag from the regular expression it returns first matching with all capturing groups. Like this:

JavaScript String matchAll

The matchAll() method is an improved variant of the match() method. It finds all the matching strings against a regular expression with its capturing group.

The method returns an iterator containing strings and capturing group.

const str = "learning to code is learning to create and innovate";
// matchAll Method with g flag
const regexp = /l(earn)(in)g/g;
const matches = str.matchAll(regexp);
console.log(Array.from(matches));

Note: Since the method returns an iterator which is an object so we need to converts it in array to access. Here we are using Array.from() method to converts it to array.

Syntax Of matchAll() method

The syntax of the matchAll() method is following:

string.matchAll(regexp);

• string: It is the string you want to find all the matches for.
• regexp - A regular expression is passed against which match is found. If the passed argument is not a regular expression then the method implicitly converts it to a regular expression.

Note: If regexp passed as an argument does not have /g flag a TypeError (matchAll must be called with a global RegExp) will be thrown.

const str = "learning to code is learning to create and innovate";
const regexp = "(ea)(t)"; // not a regular expression
const matches = str.matchAll(regexp);
console.log(Array.from(matches));

In the above example, the passed argument in the matchAll method is not a regular expression so the method implicitly converted it to regex and find the content based on it.

If regexp is not passed then it returns an array of length string.length + 1 filled with an array of single empty string. i.e ['']

const str = "learning to code is learning to create and innovate";
const matches = str.matchAll(); // no regexp passed
console.log(Array.from(matches));

Case sensitivity

regex is case sensitive but you can use flag i to make it case insensitive in matchAll method.

const str = "To do or not to do.";
const regexp = /to/gi;
const matches = str.matchAll(regexp);
console.log(Array.from(matches));

Conclusion

The matchAll() method finds all the matching elements with their capturing group in a string. It removes the limitation of thematch() method.