Tutorials Tonight's Logo
Follow Us

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


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.

Example

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" ]
▶ Try It

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

JavaScript String matchAll

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));
▶ Try It

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)

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.

Example: non-regexp

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));
▶ Try It

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));

Case sensitivity

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:

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

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.