How to extract all matches using regex in JavaScript

Regular expressions, often abbreviated as regex, are a powerful tool for matching patterns in strings. They offer a succinct way to define search patterns, which can greatly enhance text processing tasks in programming. The syntax can be daunting at first, but once you grasp the basics, you’ll find them invaluable for tasks such as data validation, string manipulation, and complex searches.

At their core, regular expressions consist of literal characters and special symbols that denote specific types of characters or sequences. For example, the dot (.) represents any single character, while the asterisk (*) signifies zero or more occurrences of the preceding element. This allows for flexible pattern matching. Here’s a simple regex pattern:

/a.b/

This pattern matches any string that contains an ‘a’, followed by any character, and then followed by a ‘b’. So, it would match “acb”, “axb”, and “a b”, but not “ab” or “aabb”. Understanding these basic building blocks especially important since they form the foundation of more complex expressions.

Character classes are another essential aspect of regex. They allow you to define a set of characters to match. For instance, the following pattern matches any lowercase vowel:

/[aeiou]/

You can also combine character classes and quantifiers. For instance, to match a sequence of one or more digits, you can use:

/[0-9]+/

This pattern will match any string containing one or more digits, such as “123”, “4”, or “56789”. Understanding how to construct these patterns is fundamental for any programmer dealing with text data.

Another important concept to grasp is grouping. Parentheses can be used to group parts of a regex pattern, so that you can apply quantifiers to the entire group. For example:

/(a(bc)?d)/

This pattern matches “ad” or “abcd”. The inner group (bc)? indicates that “bc” is optional. This functionality can be particularly useful when trying to capture complex structures within strings.

Anchors are also vital in defining the position of matches. The caret (^) signifies the start of a string, while the dollar sign ($) denotes the end. For instance, if you want to ensure a string starts with “Hello”, you can use:

/^Hello/

And for a string that ends with “World”, you would use:

/World$/

Combining these anchors with other patterns allows for precise matching, which is essential in many programming scenarios.

As you delve deeper into regular expressions, you’ll encounter backreferences, lookaheads, and lookbehinds, which provide even more powerful matching capabilities. These advanced features can significantly increase the complexity of your regex patterns, enabling you to perform intricate searches and data validations.

While regex can be incredibly powerful, it’s essential to test your expressions thoroughly. Small mistakes can lead to unexpected matches or missed patterns entirely. Various online tools, such as regex testers, can be beneficial for experimenting with and validating your patterns before implementing them in your code.

Ultimately, mastering regular expressions is a journey that pays off in the long run. The ability to efficiently search and manipulate text can elevate your programming skills to a new level. Once you get comfortable with the syntax, you’ll find that regex opens up a world of possibilities for text processing that you never knew existed. As you incorporate these techniques into your projects, you’ll begin to appreciate the elegance and efficiency they bring to the table, transforming tedious tasks into seamless operations.

Using the match method to retrieve all occurrences

The match method is one of the most simpler ways to retrieve occurrences of a pattern in a string using regular expressions. When you call string.match(regex), it returns an array of matches found or null if there are none. However, its behavior changes depending on whether the global (g) flag is set on the regex.

Without the global flag, match returns an array where the first element is the entire matched string, and subsequent elements are any captured groups. This array is similar to the result from regex.exec(string), but it only returns the first match.

const text = "The rain in Spain falls mainly in the plain.";
const regex = /ain/;
const result = text.match(regex);
console.log(result);
// Output:
// ["ain", index: 5, input: "The rain in Spain falls mainly in the plain.", groups: undefined]

In this case, the method only returns the first match for “ain”, which starts at index 5 inside “rain”. Notice that the result contains some additional properties beyond the matched substring. However, when you need to find all matches, you’ll want to use the global flag.

When the global flag is enabled (/pattern/g), match returns a simpler array containing only the matched substrings, without capturing groups or the other metadata:

const text = "The rain in Spain falls mainly in the plain.";
const regex = /ain/g;
const result = text.match(regex);
console.log(result);
// Output:
// ["ain", "ain", "ain", "ain"]

Here, every instance of “ain” within the string is returned. That is useful for counting occurrences or simply gathering every match without additional context.

Keep in mind that when you use capturing groups with the global flag, match returns only the full matches, not the captured submatches. If you want to access each capturing group for all occurrences, you’ll have to use other techniques like RegExp.exec() inside a loop. Here’s an example:

const text = "cat, bat, rat";
const regex = /(w)at/g;
let match;
while ((match = regex.exec(text)) !== null) {
  console.log(Matched: ${match[0]}, Captured group: ${match[1]}, at index: ${match.index});
}
// Output:
// Matched: cat, Captured group: c, at index: 0
// Matched: bat, Captured group: b, at index: 5
// Matched: rat, Captured group: r, at index: 10

In this example, the exec method is repeatedly called, advancing through the string thanks to the global flag, allowing access to both the entire match and the first capturing group for each occurrence.

Using the matchAll method—available in modern JavaScript engines—is a more elegant solution for retrieving all matches along with their capture groups. Unlike match, it returns an iterator over all matches, each containing detailed information:

const text = "cat, bat, rat";
const regex = /(w)at/g;
const matches = text.matchAll(regex);

for (const match of matches) {
  console.log(Matched: ${match[0]}, Captured group: ${match[1]}, at index: ${match.index});
}
// Output:
// Matched: cat, Captured group: c, at index: 0
// Matched: bat, Captured group: b, at index: 5
// Matched: rat, Captured group: r, at index: 10

Note that matchAll requires the global flag to be set; otherwise, it throws a runtime error. This method combines the best parts of match and exec by giving you easy access to all matches and captured groups without manual iteration and without the pitfalls of mutable lastIndex property management.

It’s worth highlighting a subtle behavior: if a regex pattern can match empty strings—using quantifiers like * or ?—and the global flag is set, the iteration may result in infinite loops or repeated zero-length matches. In practice, avoid patterns that can produce zero-length matches unless you have explicit logic to handle those cases.

When performance is a concern, especially with large strings or a high number of matches, the simplest approach usually involves the global match method to retrieve substrings quickly. However, if you need precise match metadata or captured groups, combining global exec in a loop or matchAll is often the better choice.