Javascript regexp Lookahead

Lookahead patterns enable JavaScript to move forward through the string to search for specified patterns. Lookaround is a combined expression of Lookahead and Lookbehind. We can only capture a specific group using lookaheads if they arrive before another group of characters. This is useful when we wish to find various patterns within the same string.

Syntax

The following syntax shows the positive Javascript regexp Lookahead

The following syntax shows the negative Javascript regexp Lookahead

Explanation

There are two different kinds of lookaheads, which are as follows:

Positive lookaheads: It will determine whether a specific element is included in the search pattern but won't match it. A positive lookahead is produced by enclosing a certain pattern between (?= and).
Negative lookaheads: It checks whether a specific element is absent from the search pattern. Enclosing a specific pattern between (?! and) results in a negative lookahead.

Examples

The following examples show the positive and negative lookahead of the regular expression.

Example1:

In the example, the "butter" matches the fly or milk using the positive lookahead expression. The first value comes before the last value then the output shows the true value. If the first value does not match with last value, then the output shows a false value.

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let word1 = "butterfly";
let word2 = "buttermilk";
let exp = /(butter(?=fly))/;
let exp1 = /(butter(?=milk))/;
let result1 = (exp.test(word1));
let result2 = (exp.test(word2));
let result3 = (exp1.test(word1));
let result4 = (exp1.test(word2));
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
document.getElementById('demo_data3').innerHTML = result4;
</script>
</body>
</html>

Output

The following image shows the Boolean values as an output.

Example2:

In the example, the "butter" matches with the fly or milk using the positive lookahead expression. We can see the regular expression with the lookahead pattern to get the required value. The $1 is essential to get the after value from the pattern.

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let word1 = "butterfly";
let word2 = "soyamilk";
let exp = /(butter(?=fly))/;
let exp1 = /(soya(?=milk))/;
let result1 = (exp1.test(word2));
let result2 = (RegExp.$1);
let result4 = (exp.test(word1));
let result3 = (RegExp.$1);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
</script>
</body>
</html>

Output

The following image shows the data values as an output.

Example3:

In the example, the "butter" matches with the fly or milk using the negative lookahead expression. The first value does not come before the last value. Then the output shows the true value. If the first value does not match with last value, then the output shows a false value.

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using negative lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let words1 = "soyafly";
let words2 = "soyamilk";
let exp = /(soya(?!fly))/;
let exp1 = /(soya(?!milk))/;
let result1 = (exp.test(words1));
let result2 = (exp.test(words2));
let result3 = (exp1.test(words1));
let result4 = (exp1.test(words2));
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
document.getElementById('demo_data3').innerHTML = result4;
</script>
</body>
</html>

Output

The following image shows the Boolean values as an output.

Example4:

In the example, the "butter" matches with the fly or milk using the negative lookahead expression. We can see the regular expression with the negative lookahead pattern to get output. This example shows the required value using $1. It is essential to get unavailable after the value from the pattern.

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using negative lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let fword = "soyafly";
let sword = "soyamilk";
let exp = /(soya(?!fly))/;
let result1 = (exp.test(fword));
let result2 = (exp.test(sword))
let result3 = (RegExp.$1);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
</script>
</body>
</html>

Output

The following image shows the Boolean values as an output.

Example5:

In the example, the lookahead regexp uses to get the available values from pattern values. We can use the console tab, alert, and other output tabs. We can work with the match function through the lookahead function. Here, the output shows the values that come before the input value.

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let word1 = "web development costs 40@";
let word2 = "32@ for the tutorial";
let result1 = word1.match(/\d+(?=@)/);
let result2 = word2.match(/\d+(?=@)/);
let result3 = word1.match(/\d+(?=@)/);
let result4 = word2.match(/\d+(?=@)/);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
document.getElementById('demo_data3').innerHTML = result4;
</script>
</body>
</html>

Output

The following image shows the Boolean values as an output.

Example6:

In the example, the negative lookahead regexp uses to get the available values from pattern values.

<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookahead </title>
</head>
<body>
<h3> Javascript regexp Lookahead </h3>
<h4> Displays the similar values in the variable data using positive lookahead. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<script>
let word1 = "web development costs 40@802";
let word2 = "32@405 for the tutorial";
let result1 = word1.match(/\d+(?!@)/);
let result2 = word2.match(/\d+(?!@)/);
let result3 = word1.match(/\d+(?!$2)/);
document.getElementById('demo_data').innerHTML = result1;
document.getElementById('demo_data1').innerHTML = result2;
document.getElementById('demo_data2').innerHTML = result3;
</script>
</body>
</html>

Output

The following image shows the Boolean values as an output.

Supported Browsers

The following browsers support the javascript lookbehind expression.

Google Chrome
Firefox
Internet Explorer
Opera
Safari

Conclusion

The javascript lookahead expression is used to search the required keyword in the string value. This expression uses for pattern recognization and operation.

Next TopicJavascript regexp Lookbehind

← prev next →