JavaScript Regular Expressions
JavaScript Regex Groups
Groups capture part of a match so you can use it afterwards.
Round brackets create a group.
The text each group matched comes back in the result.
Example
Example
javascript
const match = "2026-01-15".match(/(\d{4})-(\d{2})-(\d{2})/);
console.log(match[1]);
console.log(match[2]);
console.log(match[3]);Position 0 is the whole match; the groups follow.
Capture Groups
Round brackets capture the part they match.
The results appear in order after the full match.
Named groups make the result far easier to read.
Syntax
Syntax
javascript
/(\d{4})-(\d{2})/
/(?<year>\d{4})/match[0] is always the whole match.
Named Groups
A name makes the code readable months later.
Example
Example
javascript
const pattern = /(?<year>\d{4})-(?<month>\d{2})/;
const match = "2026-01".match(pattern);
console.log(match.groups.year);
console.log(match.groups.month);Far clearer than remembering which number is which.
Grouping for Quantifiers
Brackets let a quantifier apply to several characters at once.
Example
Example
javascript
console.log(/^(ab)+$/.test("ababab"));
console.log(/^(ab)+$/.test("aba"));The quantifier repeats the whole group.
Alternation
A pipe means one or the other.
Example
Example
javascript
const pattern = /^(cat|dog)$/;
console.log(pattern.test("cat"));
console.log(pattern.test("dog"));
console.log(pattern.test("bird"));Brackets keep the alternation from spreading across the anchors.
Using Groups in a Replacement
$1 refers to the first group in the replacement text.
Example
Example
javascript
const date = "2026-01-15";
console.log(date.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1"));The output is 15/01/2026.
Non-Capturing Groups
(?:...) groups without capturing.
Use it when you need the brackets but not the result.
Example
Example
javascript
const match = "abcabc".match(/^(?:abc)+$/);
console.log(match[0]);
console.log(match.length);Only the full match came back, with no separate group.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Regex Groups</title>
</head>
<body>
<h1>Regex Groups</h1>
<p id="out"></p>
<script>
const date = "2026-01-15";
const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = date.match(pattern);
document.getElementById("out").innerHTML =
"Year: " + match.groups.year +
"<br>Month: " + match.groups.month +
"<br>Day: " + match.groups.day +
"<br>Rearranged: " + date.replace(pattern, "$3/$2/$1");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try another order:
Change the replacement to "$2/$3/$1".
Important Points
- Round brackets capture part of a match.
match[0]is the whole match.- Named groups appear in
match.groups. - A pipe means one alternative or another.
(?:...)groups without capturing.
Conclusion
Groups turn a match into usable pieces.
Named groups are worth the extra characters every time.
Alternation inside brackets keeps anchored patterns correct.