In this tutorial, you will learn about the matchAll() method in JavaScipt.
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 return the first match with all the capturing groups but with the g flag it return 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 regular expression it returns first matching with all capturing groups. Like this:
"learning", "earning", "earn", groups: undefined, index: 0, input: "learning to code is learning to create and innovate", length: 3
The matchAll() method is an improved variant of the match() method. It finds all the matching string against a regular expression with it capturing group.
The method returns an iterator containing strings and capturing group.
Example: matchAll method finds all matching with its 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: 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 ['']
Example: no regexp
const str = "learning to code is learning to create and innovate"; const matches = str.matchAll(); // no regexp passed console.log(Array.from(matches));
regex is case sensitive but you can use flag i to make it case insensitive in matchAll method.
Example: case sensitive
const str = "To do or not to do."; const regexp = /to/gi; const matches = str.matchAll(regexp); console.log(Array.from(matches));
Points to remember:
- The matchAll() method finds all the matching elements with their capturing group in a string.
- It removes the limitation of thematch() method.
Want to learn more about programming and web development? We have a few recommendations for you.