Regexes Got Good: The History and Future of Regular Expressions in JavaScript

Over at Smashing Magazine, I just published a 3,100-word (no fluff) article evaluating the history, present state, and future of regexes in JavaScript, with lots of tips. I think all JavaScript developers will learn something from this, and I'd love to know what was new for you!

Check it out: Regexes Got Good: The History And Future Of Regular Expressions In JavaScript.

article screenshot

Launching: ‘regex’ template tag and Regex Colorizer v1

I've recently released two new open source regex libraries.

regex

regex is a template tag for dynamically creating readable, high performance, native JavaScript regular expressions with best practices built-in and advanced features. It's lightweight, has no dependencies, and supports all ES2024+ regex features.

Highlights include using whitespace and comments in regexes, atomic groups via (?>…) which can help you avoid ReDoS, subroutines and subroutine definition groups which enable powerful subpattern composition, and context-aware interpolation of RegExp instances, escaped strings, and partial patterns.

Run npm install regex in your JavaScript project and then simply import {regex} from 'regex' to get started. Check out examples and more on GitHub.

Regex Colorizer 1.0

Regex Colorizer is a project that highlights regex syntax, for use in blogs, docs, and regex tools. I created it for old-school RegexPal back in 2007, but it hadn't received any updates since 2010. Until now. Version 1.0 is a significant update that improves its API and adds support for modern JavaScript regex syntax and flags. Check out the demo!

Awesome Regex: The best regex resources for all major regex flavors

Awesome Regex logo

I created a curated list on GitHub of the best regular expression tools, tutorials, libraries, and many other resources. It covers all major regex flavors, and currently includes especially deep coverage of regular expressions in JavaScript (including a concise history of all regex features added to JavaScript in ES6 through ES2024, plus active proposals for the future).

Check it out, and return to it easily with a handy shortcut URL: regex.cool.

parseUri 2.0: A mighty but tiny URI parser

I created parseUri v1 17 years ago, but never hosted it on GitHub/npm because it's older than both of those tools. Nevertheless, it’s been used very widely ever since due to it being tiny and predating JavaScript’s built-in URL constructor. After this short gap, I just released v2: github.com/slevithan/parseuri. It’s still tiny (nothing similar comes close, even with libraries that support far fewer URI parts, types, and edge cases), and it includes several advantages over URL:

  • parseUri gives you many additional properties (authority, userinfo, subdomain, domain, tld, resource, directory, filename, suffix) that are not available from URL.
  • URL throws e.g. if not given a protocol, and in many other cases of valid (but not supported) and invalid URIs. parseUri makes a best case effort even with partial or invalid URIs and is extremely good with edge cases.
  • URL’s rules don’t allow correctly handling many non-web protocols. For example, URL doesn’t throw on any of 'git://localhost:1234', 'ssh://myid@192.168.1.101', or 't2ab:///path/entry', but it also doesn’t get their details correct since it treats everything after : up to ? or # as part of the pathname.
  • parseUri includes a “friendly” parsing mode (in addition to its default mode) that handles human-friendly URLs like 'example.com/index.html' as expected.
  • parseUri includes partial/extensible support for second-level domains like in '//example.co.uk'.

Conversely, parseUri is single-purpose and doesn’t do normalization. But of course you can pass URIs through a normalizer separately, if you need that. Or, if you wanted to create an exceptionally lightweight URI normalizer, parseUri would be a great base to build on top of. 😊

So although it’s needed less often these days because of the built-in URL, if URL is ever not enough for your needs, this is an extremely accurate, flexible, and lightweight option.

Check it out!

Regex & Facebook Experience Tech Talk

I recently gave a talk for a group of university students studying web development in Belgrade, Serbia. In it, I talked about my background, my experience starting in tech and eventually working at Facebook for seven years, and (most relevant to this blog) I spent about 20 minutes showing off some cool and advanced regular expressions. Specifically, regexes for switching Fahrenheit to Celsius, deleting repeated words, deleting non-adjacent duplicate lines, checking password complexity, reformatting names, adding thousands separators, matching balanced parentheses, and matching palindromes.

You can find the video and slides here (Lecture at SAE Belgrade: Lessons from Facebook) or you can watch the video on YouTube (with the regex portion starting at 52:26).