Regular Expression 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
| Type | Syntax | Description |
|---|---|---|
| Capturing | (x) | Matches x and remembers the match for extraction or backreferences |
| Named Capturing | (?<name>x) | Matches x and stores it under a specific name in the groups property |
| Non-Capturing | (?:x) | Groups x logically (e.g., for quantifiers) without remembering the match |
| Lookahead | (?=x) | Matches only if the pattern is followed by x |
| Lookbehind | (?<=x) | Matches only if the pattern is preceded by x |
| Flag | (?flag:x) | Enables flag(s) for x |
| Flag | (?flag-flag:x) | Disables flag(s) for x |
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);
Try it Yourself »
let text = "Alice loves Bob-";
const pattern = /(\w+) loves (\w+)/;
let result = pattern.exec(text);
Try it Yourself »
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 (?<n>)
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;
Try it Yourself »
Explained
- (?<firstName>\w+) captures a word and labels it firstName
- (?<lastName>\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
The i flag is only enabled for the W3Schools part of the pattern.
let text = "W3Schools tutorials.";
const pattern = /(?i:W3Schools) tutorials/;
// Returns true:
let result = pattern.test(text);
Try it Yourself »
The i flag is only enabled for the W3Schools part of the pattern.
let text = "W3Schools Tutorials.";
const pattern = /(?i:W3Schools) tutorials/;
// Returns false:
let result = pattern.test(text);
Try it Yourself »
Regular Expression Methods
Regular Expression Search and Replace can be done with different methods.
These are the most common:
String Methods
| Method | Description |
|---|---|
| match(regex) | Returns an Array of results |
| matchAll(regex) | Returns an Iterator of results |
| replace(regex) | Returns a new String |
| replaceAll(regex) | Returns a new String |
| search(regex) | Returns the index of the first match |
| split(regex) | Returns an Array of results |
RegExp Methods
| Method | Description |
|---|---|
| regex.exec() | Returns an Iterator of results |
| regex.test() | Returns true or false |
