I’ve always loved exploring regular expressions because they’re one of those skills that’s never taught in school — you need to pick them up on the fly, messing up and fixing them along the way. Regex’s are incredibly powerful, and one power they have are referred to as backreferences, which essentially allow you to use a match within the same regular expression.
The easiest way to explain a backreference is with a simple goal: using a regex to simulate destructuring. Take the following code snippet:
const body = document.blah.body;
With an awesome new language feature like JavaScript destructuring, a better way to write the code above is:
const { body } = document.blah;
Note: As a general programming rule, using regular expressions to implement or simulate language features is a very bad idea. For the sake of explaining backreferences, however, it’s perfect.
The backreference syntax is {number of match}:
const code = "const body = document.blah.body;";
const destrcutured = code.replace(/const (w+) = ([A-z.]+).1;/, "const { $1 } = $2;");
// const { body } = document.blah";
In the example above, we use 1 to refer to the first match within the same expression. We then use $1 to reflect the matched (w+) and $2 to reflect the object chain (([A-z.]+)). You can use any number of backreferences with {#} syntax. Be aware that backreferencing is taxing on performance: some utilities like VS Code wont support them; Atom editor does support backreferencing.
Regular expressions are always an adventure and there’s always more to learn. My favorite part of regular expressions is how a single character can drastically change the result — such power in a condensed amount of code!
