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

Incredible Demos

  • By
    Prevent Page Zooming in Mobile Browsers

    Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets...

  • By
    Modal-Style Text Selection with Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in...

Discussion

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