RegExp Lookbehind

Regular expressions (RegEx or RegExp) is a powerful feature in any language. When it comes to searching a complicated pattern in a string, Regular Expressions come in handy. Until now, Regular Expressions implementation in JavaScript had everything except lookbehind.

⎈ Lookahead

Let’s first understand what lookahead in Regular Expression is, which JavaScript already had support for. Lookahead syntax in RegExp lets you select a pattern in a string when another known pattern is or isn’t just next to it or ahead of it. For example, in the string “MangoJuice, VanillaShake, GrapeJuice”, we can use positive lookahead syntax to find words which have Juice next to it, which are Mango and Grape.

There are two types of lookaheads, viz. positive lookahead and negative or negating lookahead.

Positive Lookahead

A positive lookahead is used to select a pattern when another known pattern is ahead of it. The syntax for positive lookahead is as below.

/[a-zA-Z]+(?=Juice)/

Above pattern selects words with upper or lowercase letters which has Juice next to them. Do not get confused with capture groups in RegExp. Lookaheads and Lookbehinds are written in parenthesis but they are never captured. Let’s see an actual example of positive lookahead.

const testString = "MangoJuice, VanillaShake, GrapeJuice";

const testRegExp = /[a-zA-Z]+(?=Juice)/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Mango", "Grape"]

Negative Lookahead

Similarly, an example of negative lookahead in the context of the above example would be to select all the words which do not have Juice ahead of them. The syntax for the negative lookahead is similar to the syntax for the positive lookahead but with one modification. We need to replace = sign with ! sign.

/[a-zA-Z]+(?!Juice)/

Above RegExp pattern will select all the words which do not have Juice word ahead of them. But the above pattern will select all the words in the given string as all the words in the given string do not end with Juice, hence we need to be more specific.

/(Mango|Vanilla|Grape)(?!Juice)/

This pattern will select Mango or Vanilla or Grape words which do not have Juice ahead of them. Let’s see this in action.

const testString = "MangoJuice, VanillaShake, GrapeJuice";

const testRegExp = /(Mango|Vanilla|Grape)(?!Juice)/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Vanilla"]

⎈ Lookbehind

Similar to lookahead, Lookbehind is a syntax in RegExp that lets you select a pattern in a string only when some another known pattern in a string is or isn’t just behind it. For example, in the string “FrozenBananas, DriedApples, FrozenFish”, we can use positive lookbehind to find words which have Frozen just behind them, like Bananas and Fish.

Similar to lookahead, there is a positive lookbehind and negative or negating lookbehind.

Positive Lookbehind

Positive lookbehind is used to select a pattern in a string when another known pattern is just behind it. The syntax for positive lookbehind is as below.

/(?<=Frozen)[a-zA-Z]+/

The pattern for lookbehind is similar to lookahead but with the extra < character which signified looking behind. The above pattern would select all the words which start with Frozen or has Frozen behind them. Let’s see this in action.

const testString = "FrozenBananas, DriedApples, FrozenFish";

const testRegExp = /(?<=Frozen)[a-zA-Z]+/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Bananas", "Fish"]

Negative Lookbehind

Negative lookbehind is to select a pattern in a string when another known pattern is not just behind it. For example, if had to select words in “FrozenBananas, DriedApples, FrozenFish” string, which do not have Frozen just behind them, we would use below syntax.

/(?<!Frozen)[a-zA-Z]+/

But since the above pattern will select all the words in the string as all the words do not start with Frozen, we need to be more specific.

/(?<!Frozen)(Bananas|Apples|Fish)/

Let’s see this in action.

const testString = "FrozenBananas, DriedApples, FrozenFish";

const testRegExp = /(?<!Frozen)(Bananas|Apples|Fish)/g; const matches = testString.match( testRegExp ); console.log( matches ); // ["Apples"]

⌘ Support: TC39: Stage 4, Chrome: 62+, Node: 8.10.0+