JavaScript Regular Expressions
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
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.
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
javascript
/(\d{4})-(\d{2})/
/(?<year>\d{4})/match[0] is always the whole match.
A name makes the code readable months later.
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.
Brackets let a quantifier apply to several characters at once.
Example
javascript
console.log(/^(ab)+$/.test("ababab"));
console.log(/^(ab)+$/.test("aba"));The quantifier repeats the whole group.
A pipe means one or the other.
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.
$1 refers to the first group in the replacement text.
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.
(?:...) groups without capturing.
Use it when you need the brackets but not the result.
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
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>Run the above example in the Try It Editor.
Try another order:
Change the replacement to "$2/$3/$1".
match[0] is the whole match.match.groups.(?:...) groups without capturing.Groups turn a match into usable pieces.
Named groups are worth the extra characters every time.
Alternation inside brackets keeps anchored patterns correct.