Reverse Lookups with JavaScript

By  on  

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!

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!