Groups & backreferences

Save pieces of a match and use them again

A regular expression, or regex, is a pattern for finding text. So far, a regex told you two things: did it match, and what text did it match. This lesson shows how a regex can also save smaller pieces of that text. Then you can use those pieces again.

This table lists the four kinds of round-bracket groups in this lesson. Read each row from left to right: the name, how you write it, what it does, and when to use it.

This lesson is only about groups. Other lessons cover the rest:

• How to make a regex, flags, and the methods test, exec, match, matchAll, and replace: Patterns & flags.
• Repeat marks like + and *: Quantifiers.
• Copying the properties of an object into variables, which helps with named groups: Destructuring.

Groups get numbers in the order of their opening round bracket, (, counted from left to right. In /(\d{4})-(\d{2})-(\d{2})/:

• the year, (\d{4}), is group 1;
• the month is group 2;
• the day is group 3.

exec() runs the regex on some text and gives back a match result. The match result is a list. match[0] holds the whole match. match[1], match[2], and so on hold the groups.

1const match = /(tea) (milk)/.exec("buy tea milk");2console.log(match[0], match[1], match[2]);3console.log(match.index);4console.log(match.groups);

Line 1 runs exec() on "buy tea milk". The regex has two groups, (tea) and (milk). Line 2 prints tea milk tea milk: first the whole match, then group 1, then group 2.

Line 3 prints 4. match.index is the position where the match starts. Positions count from 0, so the t of tea is at 4. Line 4 prints undefined. match.groups holds named groups, and this regex has none.

1const pattern = /(\d{4})-(\d{2})-(\d{2})/;Run2const text = "date: 2026-09-26";3const match = pattern.exec(text);4console.log(match[0]);5console.log(match[1]);6console.log(match[2]);7console.log(match[3]);

Step through the code above. The first ( on line 1 starts the year group. So after exec() finds a match, match[1] is "2026". The second ( starts match[2], and the third starts match[3]. The hyphens and the digit codes like \d{2} get no slots. Only round brackets make groups.

1const pattern = /file-(\d+)(?:-(draft))?/;2console.log(pattern.exec("file-42")[1]);3console.log(pattern.exec("file-42")[2]);4console.log(pattern.exec("file-42-draft")[2]);

The ? at the end of line 1 makes the -(draft) part optional. (The ?: makes a group that saves nothing. You will meet it later in this lesson.) So the (draft) group can be used or skipped.

• Line 2 prints 42, the number that group 1 saved.
• Line 3 prints undefined. The text file-42 has no -draft, so the (draft) group was skipped.
• Line 4 prints draft, because file-42-draft has it.

A skipped group is not the same as a failed match. If the whole regex fails, exec() returns null, and there are no slots at all.

1const skipped = /(tea)?milk/.exec("milk");2const empty = /(te*)/.exec("te");3console.log(skipped[1]);4console.log(empty[1]);5console.log(/((?:tea)*)/.exec("")[1]);

Line 3 prints undefined. The text is only milk, so the optional (tea) group was skipped. Line 4 prints te, the two letters the group saved. Line 5 prints an empty string, "". The outer group was used, but the * inside it repeated zero times, so it saved no letters.

So undefined means the group was skipped. An empty string means the group was used but saved nothing.

A named group has a name as well as a number. You write it as (?<name>...). The match result then gets a groups object, and each name is a property on it, like match.groups.year.

Names make long regexes easier to read. You can also use destructuring to copy the names you need into variables: const { year } = match.groups.

1const match = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec("2026-09-26");2const { year, month, day } = match.groups;3console.log(year);4console.log(day + "/" + month + "/" + year);5console.log(match[1], match.groups.year);

Line 1 names three groups: year, month, and day. Line 2 copies them out of match.groups into three variables. Line 3 prints 2026. Line 4 puts the parts in a new order and prints 26/09/2026. You don't need to remember that the day was group 3.

Line 5 prints 2026 2026. A named group still has a number too, so match[1] and match.groups.year hold the same text.

1const text = "Ship 2026-09-26, return 2027-01-05";2const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g;3const dates = [...text.matchAll(pattern)].map(({ groups }) =>4  groups.month + "/" + groups.day + "/" + groups.year,5);6console.log(dates.join(", "));

exec() gives you one match. matchAll() gives you every match, each with its own groups. It needs the g flag, which means "find all matches".

• Line 2 adds g, so both dates are found.
• On line 3, ({ groups }) takes the groups object out of each match.
• Lines 3 to 5 turn each groups object into a date like 09/26/2026.
• Line 6 prints 09/26/2026, 01/05/2027.

Plain match() with g is different. It gives only the matched text of each match, without the groups.

Groups also work in replace(). In a replacement string, $1 means "the text group 1 saved". $2 means group 2, and so on. So "$2/$3/$1" writes the month, then the day, then the year.

1const iso = "2026-09-26";Run2console.log(iso.replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1"));3 4const person = "Lovelace, Ada";5const namePattern = /(?<last>\w+), (?<first>\w+)/;6console.log(person.replace(namePattern, "$<first> $<last>"));7console.log(person.replace(namePattern, (full, last, first, offset, input, groups) => {8  return groups.first.toUpperCase() + " " + groups.last.toUpperCase() + " at " + offset;9}));

1const text = "tea milk";2console.log(text.replace(/(tea) (milk)/, "$2 $1"));3console.log(text.replace(/(tea) (milk)/, "$$1 $2"));4console.log(text.replace(/(tea) (milk)/, "$&"));

• Line 2 prints milk tea. $2 puts in group 2, then $1 puts in group 1.
• Line 3 prints $1 milk. $$ puts in one plain dollar sign, so the 1 after it is just text.
• Line 4 prints tea milk, because $& puts in the whole match.

These $ codes only work in a replacement string. Inside the regex itself, you write \1 instead. You will see it in the backreferences section.

You can also pass a function to replace() instead of a string. This is called a replacer function. JavaScript calls it once for each match and uses what it returns. It gets these arguments, in this order:

1. the whole match;
2. the text of each group, one argument per group;
3. the position where the match starts;
4. the whole input text;
5. the groups object, if the regex has named groups.

Use a function when the new text needs some work, such as a check or a change to capital letters.

Round brackets do two jobs at once:

• They group pieces, so a mark after them works on the whole group. For example, | means "or", and + means "one or more".
• They save the text, which uses up a slot number.

Sometimes you only need the first job. Then write (?:...). This is a non-capturing group: it groups, but it saves nothing and takes no number. Your other groups keep their numbers.

1const capturing = /^(cat|dog)-(food|toy)$/;2const nonCapturing = /^(?:cat|dog)-(food|toy)$/;3console.log(capturing.exec("cat-food")[1]);4console.log(capturing.exec("cat-food")[2]);5console.log(nonCapturing.exec("cat-food")[1]);6console.log(/(\d)+/.exec("123")[1]);

• Line 1 has two capturing groups. (cat|dog) is group 1 and (food|toy) is group 2. Lines 3 and 4 print cat and food.
• Line 2 uses (?:cat|dog). It groups the two animals but saves nothing. So (food|toy) becomes group 1, and line 5 prints food.
• Line 6 shows one more rule. When a group repeats, it keeps only its last piece. /(\d)+/ matches 123, but group 1 holds only "3".

The next example uses two more marks. ^ means "the start of the text", and $ means "the end of the text".

1const loose = /cat|dog/;2const anchoredWrong = /^cat|dog$/;3const anchoredRight = /^(?:cat|dog)$/;4for (const word of ["cat", "dog", "catfish", "hotdog", "bird"]) {5  console.log(word + ": " + loose.test(word) + " " + anchoredWrong.test(word) + " " + anchoredRight.test(word));6}

The loop on line 4 tests five words. Each printed line shows three results, in this order: loose, anchoredWrong, and anchoredRight.

The | splits the whole pattern into two halves. So ^cat|dog$ means "cat at the start" or "dog at the end". That is why catfish and hotdog give true in the middle result.

To mean "the whole text is exactly cat or dog", group the two words first: /^(?:cat|dog)$/. The next lesson covers ^ and $ in more depth.

Backreferences: match the same text again

A backreference asks for the text a group saved, again, later in the same regex. It does not repeat the pattern. It repeats the text. If group 1 saved cat, the backreference must find cat. There are two ways to write one:

• \1 points to group 1. In the same way, \2 points to group 2.
• \k<name> points to a named group.

Backreferences can find a word typed twice. They can also check that a quote ends with the same quote mark it started with.

1const repeated = /(\w+)\s+\1/i;2console.log(repeated.test("Tea tea"));3console.log(repeated.test("Tea coffee"));4const strict = /(\w+)\s+\1/;5console.log(strict.test("Tea tea"));6console.log(repeated.test("Tea teatime"));7console.log(/\b(\w+)\s+\1\b/i.test("Tea teatime"));

In line 1, (\w+) saves one word. (\w is a letter, a digit, or _.) Next, \s+ means one or more spaces. Then \1 asks for the saved word again. The i flag at the end means "ignore case", so Tea and tea count as the same.

• Line 2 prints true.
• Line 3 prints false, because coffee is a different word.
• Line 5 prints false. The strict regex on line 4 has no i flag, so Tea and tea are different.
• Line 6 prints true for Tea teatime. The regex only needs tea at the start of the second word.
• Line 7 adds \b, which means "the edge of a word". Now the second word must end right after tea, so line 7 prints false.

1const repeated = /\b(?<word>[A-Za-z]+)\s+\k<word>\b/i;2console.log(repeated.test("Please please stop"));3console.log("Please please stop".replace(repeated, "$<word>"));4 5const quoted = /(?<quote>['"])(?<text>.*?)\k<quote>/;6console.log(quoted.exec("say \"hi\" and 'bye'").groups.text);7console.log(quoted.test("\"mismatch'"));

• Line 1 saves a word in a group named word. Then \k<word> asks for the same word after the spaces. Line 2 prints true.
• Line 3 swaps the two words for one copy, $<word>, and prints Please stop.
• Line 5 saves the opening quote mark, ' or ", in a group named quote. The \k<quote> at the end asks for that same mark to close it. Line 6 prints hi.
• Line 7 prints false. The text "mismatch' starts with " but ends with '.

For a long time, JavaScript did not allow two groups with the same name. The ES2025 version of JavaScript allows it in one case: when the two groups are on different sides of a |. Only one side can match, so only one group with that name is ever used.

This helps when one date format puts year first and another puts year last.

This table shows where this works today. Read each row from left to right: what you try, whether it works, and what to do.

1const source = "(?<year>\\d{4})-\\d{2}|\\d{2}/(?<year>\\d{4})";2try {3  const pattern = new RegExp(source);4  console.log(pattern.exec("2026-09").groups.year);5  console.log(pattern.exec("09/2026").groups.year);6} catch (error) {7  console.log(error.name + ": " + error.message);8}

MDN's browser data says current Chrome, Firefox, and Safari support it. But this site's tests run on Node 22.23.1, and Node 22 still throws Duplicate capture group name. So this lesson does three things:

• It keeps the pattern in a string, not in a regex written between slashes.
• It builds the regex with new RegExp() inside try/catch, so an error can be caught.
• It checks the browser result in a separate test.

Trying a feature and catching the error is called feature detection.

The d flag adds an indices list to the match result. It tells you where each piece is in the text:

• match.indices[0] is where the whole match starts and ends.
• match.indices[1] is where group 1 starts and ends.
• match.indices.groups.year is where the year group starts and ends.

Each one is a pair, [start, end]. The end is the position just after the last character. This is the same rule as slice(start, end).

1const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/d;2const match = pattern.exec("Created 2026-09-26");3console.log(match.indices.groups.year);

1const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/d;2const match = pattern.exec("Ship on 2026-09-26.");3console.log(match.indices[0].join(".."));4console.log(match.indices.groups.year.join(".."));5console.log(match.indices.groups.month.join(".."));6console.log(match.indices.groups.day.join(".."));

• Line 3 prints 8..18. The date starts at position 8 and ends just before 18.
• Line 4 prints 8..12 for the year.
• Lines 5 and 6 print 13..15 and 16..18 for the month and the day.

These numbers are positions in the original text. But a position is not always the number of characters you see on screen. The next example shows why.

1const text = "\u{1D11E} tea";2const match = /(?<item>tea)/d.exec(text);3console.log(match.indices.groups.item.join(".."));4console.log(text.slice(...match.indices.groups.item));

Line 1 starts the text with a music symbol, written as \u{1D11E}. You see one symbol. But JavaScript stores text in small pieces called UTF-16 code units, and this symbol takes two of them. Then comes a space. So tea starts at position 3, not 2.

Line 3 prints 3..6. Line 4 passes the same pair to slice() and prints tea. So pass the positions straight to slice(). Don't count the characters you see.

1try {2  const pattern = new RegExp("(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})", "d");3  const match = pattern.exec("Created 2026-09-26 by Ada");4  console.log(match?.indices?.groups ?? match?.indices ?? "no match");5} catch (error) {6  console.log(error.name + ": " + error.message);7}

This is how a regex can help a web page. A log viewer can save the time, level, and message of each line in groups. Then it can highlight exactly those positions, without guessing lengths. The playground above limits how long the text and the pattern can be. It also catches a broken pattern, so your edits can't crash the page.

Where groups and backreferences show up

Groups help most when you do something with the pieces after the match. If you only need a yes or no, a regex without groups is often enough. Groups are worth it when you want to read, replace, highlight, or compare the pieces.

Each row of this table is a real task. The second column says how groups help with it.

A log line is one line of notes that a program writes about what it did. The next example reads two parts of one.

1const line = "INFO: user=Asha";2const pattern = /(?<level>[A-Z]+): user=(?<user>\w+)/;3const match = pattern.exec(line);4console.log(match.groups.level);5console.log(match.groups.user);

Line 2 names two groups: level and user. Line 3 runs the regex. Lines 4 and 5 read the two groups by name and print INFO and Asha.

For a full log format with many rules, use a parser instead of one big regex. A parser is a program that reads a format step by step.

1const cart = "tea: 3, milk: 5";2const item = /(?<name>\w+): (?<price>\d+)/g;3const labels = cart.replace(item, (full, name, price) => name + " costs $" + price);4console.log(labels);

Line 2 uses the g flag, so replace() changes both items. Line 3 passes a replacer function. For each match, it gets the whole match, then the name group, then the price group. It returns a new label. Line 4 prints tea costs $3, milk costs $5. Use a function like this when the new text needs to be built, not just copied.

Three more places where groups help:

• Checking a whole form field: exec() also finds matches in the middle of longer text. Put ^ and $ around the whole pattern when extra characters are not allowed.
• Cleaning up text: a backreference can find a word typed twice. Then an editor can turn the the into the.
• Highlighting: indices.groups tells a web page exactly where the year, month, day, or quoted text is.

Common misconceptions

• "Round brackets always mean I want the text later." Not always. Use (?:...) when you only need to group, for | or a repeat mark like +.
• "Group numbers follow how close the groups look." Numbers follow the order of the opening (, from left to right. This is true even for a group inside another group, and for a group that gets skipped.
• "A skipped optional group gives an empty string." It gives undefined. An empty string means the group was used but saved no characters.
• "^cat|dog$ means exactly cat or dog." The | splits the whole pattern into ^cat or dog$. Write ^(?:cat|dog)$ for exact words.
• "A backreference repeats the pattern." It repeats the saved text. If group 1 saved "cat", \1 must find "cat".
• "If browsers support a regex feature, Node does too." The same group name in two choices works in modern browsers. This project's Node 22 still rejects it.

This table compares four kinds of groups. Read down a column to see how one kind behaves.

Some questions ask what a word means. Others show code and ask what it prints. For code questions, first number the groups. Then work out the last line.

Key takeaways

• Groups get numbers in the order of their opening (. match[0] is the whole match.
• A skipped group gives undefined. A repeated group keeps only its last piece.
• Named groups make match results, destructuring, and replacements easier to read.
• Use (?:...) to group without saving and without changing the numbers.
• A backreference asks for the same saved text again. The d flag tells you where each piece starts and ends.

Up next: Anchors, boundaries & lookaround. There you match spots in the text, like the start of the text or the edge of a word. You also check the text next to a spot without making it part of the match.