# Positive and negative lookaround in JavaScript regexes

Sometimes you need to solve a problem of this type: find the string `'aaa'` and replace it with `'!'`, but only if after `'aaa'⁅/s ⁆ is `'x'``, while `'x'` itself is not replaced. If we try to solve the problem `'head-on'`, then nothing will come of it:

`'aaax baaa'.replace(/aaax/g, '!'); // returns '! baaa', but we wanted '!x baaa'`

## Lookahead

To solve the problem, we need a way to say that `'x'` should not be replaced. This is done with the special parentheses `(?= )`, which just look at, but don't take with them.

These parentheses are called positive lookahead. Positive - since `'x'` (in our case) should be - only then replacement will occur.

Let's use these parentheses to solve our problem:

`'aaax aaab'.replace(/aaa(?=x)/g, '!'); // returns '!x aaab'`

There is also negative lookahead - `(?! )` - on the contrary, it says that something should not be. In the following example, the replacement will only occur if `'aaa'` is NOT followed by `'x'`:

`'aaax aaab'.replace(/aaa(?!x)/g, '!'); // returns 'aaax !b'`

## Lookbehind

Similarly, there is positive lookbehind - `(?<= )`. In the following example, the replacement will only occur if `'aaa'` is preceded by `'x'`:

`'xaaa'.replace(/(?<=x)aaa/g, '!'); // returns 'x!'`

And there is also negative lookbehind - `(?<! )`. In the following example, the replacement will only occur if `'aaa'` is not preceded by `'x'`:

`'baaa'.replace(/(?<!x)aaa/g, '!'); // returns 'b!'`

## Practical tasks

Given a string containing function names:

`let str = 'func1() func2() func3()';`

Get an array of the function names from the string.

Given a string with a tag:

`let str = '<a href="" class="eee" id="zzz">';`

Get an array of attribute names for this tag.

Given a string with variables:

`let str = '$aaa $bbb $ccc xxxx';`

Get substrings preceded by a dollar sign.

←→
↑
en ru