JavaScripts Regular Expressions Get More Power

K - Jan 2 '18 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

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]*/
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .