JavaScripts Regular Expressions Get More Power

cover image by Mike Lewinski on Flicker, cropped by me.

Regular expressions are the favorite go-to solution of most devs. Some love their Regex so much they would even use it to parse text that doesn't have a regular gramma at all, like HTML

Anyway, the RegExp class that is part of JavaScript was a bit lacking on the feature side, but this is about to change in the (hopefully) near future.

The s Flag

Routined users of regular expressions know the . operator rather well. It matches one character. Sadly, in JavaScript, it doesn't match characters like linebreaks or \n.

Using the s new s flag changes this behavior.

/^.$/s.test('\n') // == true

Lookbehind Assertions

Often you want to match text that is surrounded by special characters, but you don't want to include these special characters. JavaScript only allowed to look for these that follow the text you need. With this update you can also look at those that preceded your text.

(?=<PATTERN>) for positive lookahead
(?!<PATTERN>) for negative lookahead
(?<=<PATTERN>) for positive lookbehind
(?<!<PATTERN>) for negative lookbehind

// Positive lookahead, matches text that precedes "XYZ" 
/[\w]*(?=XYZ)/

// Negative lookahead, matches text that isn't preceded with "XYZ"
/[\w]*(?!XYZ)/

// Positive lookbehind, matches text that follows "XYZ"
/(?<=XYZ)[\w]*/

// Negative lookbehind, matches thaxt that doesn't follow "XYZ"
/(?<!XYZ)[\w]*/

Named Capture Groups

A recurring problem is also to match many parts of a text and use the results later. Regular expressions will soon allow you to name these results, so they are easier to use.

You can use (?<<NAME>><PATTERN>) to create a group with a specific <NAME> that matches your <PATTERN>. They will later be stored in the groups property of your match result object.

For example, to match a date that comes in a specific format.

const pattern = /(?<day>[\d]{2})\.(?<month>[\d]{2})\.(?<year>[\d]{4})/;

const {day, month, year} = patter.exec("30.04.2017").groups;

Conclusion

Many times I was using some online regular expression creator to build rather complicated patterns just to realize that JavaScript doesn't support them. Often this lead me to splitting the patterns and mixing them with JavaScript logic to make it work. With the new additions this shouldn't be a problem too often anymore.

Comments

[Max Cerrina]

YESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS! Seriously, this made my whole damn day. I adore regexes anyways and got so used to having so many of the more normal things from PHP like named capture groups, lookbehinds, etc., and then had to do a JS project and missed them so much.

[Christian Bewernitz]

Thank you for this article, looking forward to this addition.

Can you provide any links/resources about the progress on that topic?

but this is about to change in the (hopefully) near future.

is a bit vague, so I would love to be able to follow/know when/ under what circumstances this will be available.

[K]

Hard to say.

It goes like this, someone proposes a change/feature and writes down how it could look.

If they get worked out all the details it goes from stage 0 to stage 4 and will be part of the standard.

Point is, to see if it's a good idea it has to be implemented somewhere (node, babel, firefox) before it will be part of the standard.

This means, the stages aren't an precise indicator for availability. Can be that stuff is part of ES2019 and only babel has it implemented, can be that something is stage 3 and you can use it in all major browsers, etc.

github.com/tc39/proposal-regexp-lo...

github.com/tc39/proposal-regexp-na...

github.com/tc39/proposal-regexp-do...