Groups

By the end of this lesson, you will be able to capture parts of a JavaScript regular expression match and reference them by number or name.

What it is

In JavaScript regular expressions, a group is a part of a pattern wrapped in parentheses. A capturing group stores the text matched by that part so you can use it later. The full match is stored at index 0, and each capturing group is stored at 1, 2, and so on, in the order their opening parentheses appear.

Related terms include named groups, which give a group a readable name, backreferences, which reuse a captured value inside the same pattern, and non-capturing groups, which group characters without storing a result.

Why it matters

• You can extract useful pieces from text, such as the user and domain parts of an email-like string.
• You can build replacement strings that reuse captured values, such as swapping first and last names.
• You can validate patterns that depend on repeated content, such as matching the same word twice.
• Named groups make complex patterns easier to read and maintain.
• Groups let you apply quantifiers to a sequence, such as (\d{3})- for a phone prefix.

Syntax or steps

The smallest useful pattern is a pair of parentheses around the part you want to keep:

/(\w+)@(\w+)/

After matching, use the result array:

const match = text.match(/(\w+)@(\w+)/);
match[1]; // first captured group
match[2]; // second captured group

For named groups, use (?<name>pattern) and read them from match.groups:

const match = text.match(/(?<user>\w+)@(?<domain>\w+)/);
match.groups.user;

Example

const text = "ada@example";

const re = /(\w+)@(\w+)/;
const match = text.match(re);

if (match) {
  console.log(match[0]); // "ada@example"
  console.log(match[1]); // "ada"
  console.log(match[2]); // "example"
}

const namedRe = /(?<user>\w+)@(?<domain>\w+)/;
const namedMatch = text.match(namedRe);

console.log(namedMatch.groups.user);   // "ada"
console.log(namedMatch.groups.domain); // "example"

Here is what each part does:

• \w+ matches one or more word characters.
• @ matches the literal at sign.
• The first parentheses capture the local part, such as ada.
• The second parentheses capture the domain part, such as example.
• match[1] and match[2] reference the captured values by position.
• namedMatch.groups.user references the same value by name.

Common mistakes

• Using parentheses when you only need grouping. If you do not need the captured text, use a non-capturing group such as (?:\d{3}).
• Assuming every group always matches. If a group is optional and does not participate, its value may be undefined. Check the match before using it.
• Confusing backreference syntax. Inside a pattern, use \1. In a replacement string, use $1.
• Using match with the g flag and expecting groups. A global match returns only full matches. Use matchAll or a non-global match when you need groups.

When to use it

Use capturing groups when you need to reuse part of the match. Use non-capturing groups when you only need to apply a quantifier or alternation to a sequence.

Practice

Guided exercise: capture the city and postal code from "Paris 75001".

const text = "Paris 75001";
const match = text.match(/(\w+) (\d+)/);
console.log(match[1]); // "Paris"
console.log(match[2]); // "75001"

Challenge: swap the first and last name in "Ada Lovelace" so the result is "Lovelace, Ada".

Solution hint: use /(\w+) (\w+)/ and replace with "$2, $1".

Quick check

What does "ada@example".match(/(\w+)@(\w+)/)[1] return?

It returns "ada", because the first capturing group stores the text matched by \w+ before the at sign.

Summary

Groups let a regular expression remember parts of a match. In JavaScript, numbered groups are accessed by position, and named groups provide clearer access through match.groups.

Use capturing groups when you need the matched pieces, and non-capturing groups when you only need grouping.