JS RegExp Groups

RegExp Groups

Regular Expression Groups allow you to treat multiple characters as a single unit, extract specific parts of a match, or reference captured text later.

Group Syntaxes

RegExp Capturing Groups (x)

RegExp Capturing Groups are the most common groups. They group patterns together and "remember" the matched text for later use.

Capturing groups are created by wrapping a part of a regexp pattern in parentheses (x).

You can access the found patterns in the result array of pattern.exec(text) or text.match(pattern).

Examples

let text = "Alice loves Bob-";

const pattern = /(\w+) loves (\w+)/;

let result = text.match(pattern);

Explained

• (\w+) captures a word
• text.match(pattern) returns an array of results
• pattern.exec(text) also returns an array of results
• The full match is at index 0, and captured groups follow at index 1, 2, ....

The Result Array

When you use a method like text.match(regex) in JavaScript, it returns an array of results.

In JavaScript arrays, items are ordered by numerical positions called indices, starting at 0. JavaScript automatically organizes the array so that the whole matched text sits at the very first position ([0]), and the text from your parenthesis groups follows right after ([1], [2], [3]).

Example

const regex = /(\d{4})-(\d{2})-(\d{2})/;

const text = "2026-05-21";

const match = text.match(regex);

// This is what the 'match' array actually contains:

[

  "2026-05-21", // Index 0: The entire string that matched the whole regex

  "2026",       // Index 1: The text caught by the 1st set of parentheses

  "05",         // Index 2: The text caught by the 2nd set of parentheses

  "21"          // Index 3: The text caught by the 3rd set of parentheses

]

Named Capturing Groups (?)

Named capturing groups was introduced in ES2018).

Named capturing groups allow you to assign a name to a group instead of indexes.

When using capturing groups, the String method match() and the RegExp method exec(), return a match object with a groups property. This property holds the names and the values of the groups.

Example

const text = "Name: John Doe";

// Using named capturing groups

const regex = /(?<firstName>\w+) (?<lastName>\w+)/;

const match = text.match(regex);

let fName = match.groups.firstName;

let lName = match.groups.lastName;

Explained

• (?\w+) captures a word and labels it firstName
• (?\w+) does the same for lastName
• text.match() returns an array with a groups property
• match.groups() returns an object: {firstName:"John", lastName:"Doe" }

Non-Capturing Groups (?:...)

Non-capturing groups are patterns for logical operations (like applying a quantifier to multiple characters) but do not store the matched text.

The benefits are: They are more performant and keep the capturing group indices clean if you only need the grouping behavior, not the extracted data.

Example: /(?:ha)+/ matches "haha" but won't create a separate capture for "ha".

RegExp Group Modifiers (?flag)

The (?flag) syntax is a group modifier (inline flag modifier).

It allows for modifying flags in a part of a pattern, rather than to the entire pattern.

(?flags:pattern) enables the flags only for the pattern in the group.

Only the i, m, and s flags can be used in a group modifier.

Example

let text = "W3Schools tutorials.";

const pattern = /(?i:W3Schools) tutorials/;

// Returns true:

let result = pattern.test(text);

Note: See Also: JavaScript RegExp Tutorial JavaScript RegExp Flags JavaScript RegExp Character Classes JavaScript RegExp Meta Characters JavaScript RegExp Quantifiers JavaScript RegExp Patterns JavaScript RegExp Objects JavaScript RegExp Methods

Regular Expression Methods

Regular Expression Search and Replace can be done with different methods.

These are the most common:

String Methods

RegExp Methods