Regular Expression Groups
Regular Expression Groups allow you to treat multiple characters as a single unit, which is useful for applying quantifiers, creating alternatives, and extracting specific parts of a match.
| Syntax | Description |
|---|---|
| (x) | Matches x and saves it |
| (?<n>x) | Matches x and labels it n |
| (?flag:x) | Enables flag(s) for x |
| (?flag-flag:x) | Disables flag(s) for x |
RegExp Capturing Groups (x)
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 = "Haha, haha, haha.";
const pattern = /(haha)+/;
let result = text.match(pattern);
Try it Yourself »
let text = "Haha, haha, haha.";
const pattern = /(haha)+/;
let result = pattern.exec(text);
Try it Yourself »
Explained
- (haha) captures a group of characters
- (haha)+ matches zero or more occurences of the group
- text.match(pattern) returns an array of results
- pattern.exec(text) also returns an array of results
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.
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 »
Group Syntaxes
| Type | Syntax | Description |
|---|---|---|
| Capturing | (x) | Matches x and remembers the match for extraction or backreferences |
| Named Capturing | (? | 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 (positive) |
| Lookbehind | (?<=x) | Matches only if the pattern is preceded by x (positive) |
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 |
