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
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    CSS Rounded Corners

    The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of...

  • By
    MooTools OpenLinks Class – Updated

    A long time back I coded a MooTools class called OpenLinks. The class is quite useful but the code...sucks. I've gotten much better with MooTools over the past years so I thought I'd go back and update the class to be better, faster...

Discussion

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