Backreferences in JavaScript regular expressions (#tilPost)

Today I was preparing a slide deck about new features in JavaScript regular expressions and came across the article "Named capture groups" written by Axel Rauschmayer. The section about backreferences caught my eye.
There …

Today I was preparing a slide deck about new features in JavaScript regular expressions and came across the article "Named capture groups" written by Axel Rauschmayer. The section about backreferences caught my eye.

There might be the situation that you're dealing with a regular expression that includes repeated character sequences like the following one: /(abc)(abc)(abc)/. Instead of copying the character groups several times, pattern reuse is a better approach here. It turns out you can do that in JavaScript regular expressions.

Backreferences for capture groups

Section titled Backreferences for capture groups

When you define your regular expressions, you can reuse and backreference previous groups via \1, \2, etc..

/(πŸ•)(🌯)\1\2/.exec('πŸ•πŸŒ―πŸ•πŸŒ―');
// (3) ["πŸ•πŸŒ―πŸ•πŸŒ―", "πŸ•", "🌯", index: 0, input: "πŸ•πŸŒ―πŸ•πŸŒ―", ... ]
// Match: 
// - a pizza
// - a burrito
// - a pizza (backreferenced)
// - a burrito (backreferenced)

/(πŸ•)(🌯)\1\2/.exec('πŸ•πŸŒ―πŸ•');
// null (because one burrito is missing)

Backreferences for named capture groups

Section titled Backreferences for named capture groups

You can do the same for named capture groups via \k<name>.

/(?<one>πŸ•)(?<two>🌯)\k<one>\k<two>/.exec('πŸ•πŸŒ―πŸ•πŸŒ―');
// (3) ["πŸ•πŸŒ―πŸ•πŸŒ―", "πŸ•", "🌯", index: 0, input: "πŸ•πŸŒ―πŸ•πŸŒ―", groups: {…}]
// Match:
// - a pizza
// - a burrito
// - a pizza (backreferenced via the named capture group 'one')
// - a burrito (backreferenced via the named capture group 'two')

/(?<one>πŸ•)(?<two>🌯)\k<one>\k<two>/.exec('πŸ•πŸŒ―πŸ•');
// null (because one burrito is missing)

References in string replacements

Section titled References in string replacements

Arnd Issler pointed out, that you can not talk about backreferences in regular expression without mentioning the references when using String.prototype.replace. So, here we go. 😊

Replacement references for capture groups

You can reference included capture groups using $1, $2, etc. in the replacement pattern.

MDN provides a good example to swap words using references.

const re = /(\w+)\s(\w+)/;
const str = 'Jane Smith';
const newstr = str.replace(re, '$2, $1');
console.log(newstr);  // Smith, Jane

To follow the earlier examples you can have a look at the following "pizza-burrito-snippet":

'πŸ•πŸŒ―πŸ•πŸŒ―πŸ•πŸŒ―'.replace(
  /(πŸ•)(🌯)\1/,
  'first group: $1, second group: $2, rest:'
);
// "first group: πŸ•, second group: 🌯, rest:πŸŒ―πŸ•πŸŒ―"

As sequences such as $1 and $2 reference capture groups one might ask how to replace something with $1 without referencing an included capture group. In that case, you can use e.g. $$1.

'πŸ•πŸŒ―πŸ•πŸŒ―πŸ•πŸŒ―'.replace(
  /(πŸ•)(🌯)\1/,
  '$$1 $$1 $$1 – '
);
// "$1 $1 $1 – πŸŒ―πŸ•πŸŒ―"

Replacement references for named capture groups

The same reference functionality works for named capture groups using $<name>:

'πŸ•πŸŒ―πŸ•πŸŒ―πŸ•πŸŒ―'.replace(
  /(?<one>πŸ•)(?<two>🌯)\k<one>/,
  'first group: $<one>, second group: $<two>, rest:'
);
// "first group: πŸ•, second group: 🌯, rest:πŸŒ―πŸ•πŸŒ―"

If you want to replace something with $<name> if there is a named capture group present you can use $$<name>;

'πŸ•πŸŒ―πŸ•πŸŒ―πŸ•πŸŒ―'.replace(
  /(?<one>πŸ•)(?<two>🌯)\k<one>/,
  '$$<one> $$<one> $$<one> – '
);
// "$<one> $<one> $<one> – πŸŒ―πŸ•πŸŒ―"

I love these things – if you do, too, you should definitely have a look at other replacement patterns of String.prototype.replace. This method provides more magic than you might think.

Speaking of browser support; you have to be careful. The support for named capture groups is still not great. Babel has you covered though. πŸŽ‰

Ant that's it for today, see you next time. πŸ‘‹


Reply to Stefan
Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: