The concept of lookahead patterns in JavaScript allows for advancing through a string to locate specific patterns. Lookaround is a fusion of Lookahead and Lookbehind expressions. The utilization of lookaheads permits capturing a particular group only if it precedes another set of characters. This technique proves beneficial when seeking different patterns within a single string.
Syntax
Below is an example demonstrating the positive lookahead in JavaScript regular expressions:
X(?=Y)
Below is the syntax that demonstrates the negative lookahead in JavaScript regular expressions.
X(?!Y)
Explanation
Two types of lookaheads are available:
- Positive lookaheads: These assess if a particular element is part of the search pattern without actually matching it. To create a positive lookahead, enclose the pattern in (?= and).
- Negative lookaheads: These verify the absence of a specific element in the search pattern. By placing the pattern between (?! and), a negative lookahead is formed.
Examples
The illustrations below demonstrate both the positive and negative lookahead functionality of regular expressions.
Example1:
In this illustration, the positive lookahead expression is utilized to match the "butter" with either the fly or milk. The result displayed is true when the initial value precedes the final value. Conversely, if there is no match between the first and last values, the output indicates false.
<!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 image displayed illustrates the output of Boolean values.
Example2:
In this instance, the term "butter" corresponds with either fly or milk by utilizing the positive lookahead syntax. By examining the regular expression alongside the lookahead pattern, we can retrieve the necessary value. The $1 variable plays a crucial role in obtaining the subsequent value from the specified 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 image below displays the output in the form of data values.
Example3:
In this instance, the negative lookahead expression is utilized to ascertain whether "butter" is paired with either fly or milk. The initial value must not precede the final value. Subsequently, the result displays as true. Conversely, if the initial value does not align with the final value, the output will indicate false.
<!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 image below displays the output in the form of Boolean values.
Example4:
In this instance, the term "butter" is aligned with either the fly or milk by employing the negative lookahead construct. By examining the regular expression inclusive of the negative lookahead design, we can observe the outcome. This illustration demonstrates the expected result by referencing $1. It is crucial to ensure unavailability of the value following the specified 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
Displayed in the image are the output values represented in Boolean format.
Example5:
In this instance, the lookahead regular expression is utilized to extract the potential values from pattern values. Various output tabs like the console tab, alert, and others can be employed. The lookahead function allows us to interact with the match function. In this scenario, the result displays the values preceding 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 image below displays the output in Boolean values.
Example6:
In this instance, the negative lookahead regular expression is employed to extract the available values from the 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 image below displays the output in the form of Boolean values.
Supported Browsers
The following browsers support the javascript lookbehind expression.
- Google Chrome
- Firefox
- Internet Explorer
- Opera
- Safari
Conclusion
The lookahead expression in JavaScript is utilized to locate a specific keyword within a string value. It is employed for pattern recognition and manipulation purposes.