Lookbehind patterns in JavaScript allow the backward movement to search for specific patterns within a string. Lookaround is a fusion of Lookahead and Lookbehind expressions. When input values are preceded by another set of characters, lookbehind is applied to detect that particular set of characters. This technique proves beneficial when searching for multiple patterns in a single string.
Syntax
Below is the syntax for the positive lookbehind in JavaScript regular expressions:
(?<=Y)X
Below is the syntax that demonstrates the negative lookbehind in JavaScript regular expressions.
(?<!Y)X
Explanation
There exist two types of lookbehind, namely:
- Positive lookbehind: This type verifies the presence of a particular element within the pattern without actually making a match.
- Negative lookbehind: It is utilized to validate the absence of a specific element following the search pattern. In a negative lookbehind, a specific pattern is enclosed between (?<!) patterns.
Examples
Below are illustrations demonstrating the positive and negative lookbehind in action within a regular expression.
Example1:
In this instance, the positive lookbehind expression is utilized to match "butter" with either "fly" or "milk". The value that directly follows the pattern value is then displayed as the output, reflecting the true value.
<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookbehind </title>
</head>
<body>
<h3> Javascript regexp Lookbehind </h3>
<h4> Displays the similar values in the variable data using positive lookbehind. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let first_word = "flybird";
let sec_word = "milkanimal";
let exp = /((?<=fly)bird)/;
let exp1 = /((?<=milk)animal)/;
let result1 = (exp.test(first_word));
let result2 = (exp.test(sec_word));
let result3 = (exp1.test(first_word));
let result4 = (exp1.test(sec_word));
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 represented by Boolean values.
Example2:
In this instance, the term "butter" is associated with either fly or milk by utilizing the positive lookbehind feature in the expression. The validation of the regular expression can be conducted by employing the lookbehind pattern within the expression.
<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookbehind </title>
</head>
<body>
<h3> Javascript regexp Lookbehind </h3>
<h4> Displays the similar values in the variable data using positive lookbehind. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let first_word = "flybird";
let sec_word = "milkanimal";
let exp = /((?<=fly)bird)/;
let exp1 = /((?<=milk)animal)/;
let result1 = (exp1.test(sec_word));
let result2 = (RegExp.$1);
let result4 = (exp.test(first_word));
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 data values are displayed in the image below.
Example3:
In this instance, the negative lookbehind expression is used to associate "butter" with either fly or milk. The output will display a true value if the first value is not followed by the last value. Conversely, a false value will be displayed if the first and last values do not match.
<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookbehind </title>
</head>
<body>
<h3> Javascript regexp Lookbehind </h3>
<h4> Displays the similar values in the variable data using negative lookbehind. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let first_word = "flybird";
let sec_word = "milkanimal";
let exp = /((?<!flys)bird)/;
let exp1 = /((?<!milks)animal)/;
let result1 = (exp.test(first_word));
let result2 = (exp.test(sec_word));
let result3 = (exp1.test(first_word));
let result4 = (exp1.test(sec_word));
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 "butter" is being aligned with either the fly or milk by utilizing the positive lookbehind statement.
<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookbehind </title>
</head>
<body>
<h3> Javascript regexp Lookbehind </h3>
<h4> Displays the similar values in the variable data using positive lookbehind. </h4>
<p id = "demo_data"> </p>
<p id = "demo_data1"> </p>
<p id = "demo_data2"> </p>
<p id = "demo_data3"> </p>
<script>
let first_word = "flybird";
let sec_word = "milkanimal";
let exp1 = /((?<!milks)animal)/;
let result1 = (exp1.test(first_word));
let result2 = (exp1.test(sec_word))
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 Boolean values are displayed in the image below.
Example5:
In this instance, the lookbehind regular expression is utilized to extract the existing values from pattern values. The values can be displayed using various output methods such as the console tab, alert, and other output tabs. By employing the JavaScript match function in conjunction with the expression function, we are able to showcase the values that follow the input value.
<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookbehind </title>
</head>
<body>
<h3> Javascript regexp Lookbehind </h3>
<h4> Displays the similar values in the variable data using positive lookbehind. </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 !12costs 40@802";
let word2 = "32@430 for the !21tutorial";
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 displayed above illustrates the output values that are currently accessible.
Example 6:
In this illustration, the negative lookbehind regular expression is employed to extract the accessible values from the pattern values.
<!DOCTYPE html>
<html>
<head>
<title> Javascript regexp Lookbehind </title>
</head>
<body>
<h3> Javascript regexp Lookbehind </h3>
<h4> Displays the similar values in the variable data using negative lookbehind. </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 !12costs 40@802";
let word2 = "32@430 for the !21tutorial";
let result1 = word1.match(/(?<!\$)\b\d+/g);
let result2 = word2.match(/(?<!\$)\b\d+/g);
let result3 = word1.match(/(?<!\!)\b\d+/g);
let result4 = word2.match(/(?<!\@)\b\d+/g);
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 provides the precise values as output.
Supported Browsers:
The following browsers support the javascript lookbehind expression.
- Google Chrome
- Firefox
- Internet Explorer
- Opera
- Safari
Conclusion
The JavaScript lookbehind expression is utilized to search for a specific keyword within a string value following the input value. It is commonly employed for pattern recognition and operations.