A Regular Expression (regex) is a sequence of characters that define a pattern that allows you to search, match, locate, replace, manipulate, and manage text. I explained the basics of Regular Expressions in an earlier article: What is a Regular Expression?
If you need to match a pattern only when it comes after another pattern (called a lookbehind) or only when it comes before another pattern (called a lookahead) you need these operations, cumulatively called lookarounds.
Lookbehind Positive
In the example below, we want to match the price in the string "I purchased 24 item number 6602 for $12 each."
<script> let strTarget = "I purchased 24 item number 6602 for $12 each."; let regexp = /(?<=\$)\d+/; let res = strTarget.match(regexp); alert(res); </script>
The syntax for lookbehind positive is shown below.
(?<=B)A
It means match expression A, but only where it is preceded by expression B.
In this example expression A is one or more numerical digits, but they are matched only if preceded by expression B, which is a $ sign. Note that the dollar sign is escaped, \$, to make sure it's not confused with the $ end of string control character.
This example displays the number 12 in a message box.
Lookbehind Negative
In the example below, we want to match the quantity in the string "I purchased 24 item number 6602 for $12 each."
<script> let strTarget = "At $9 each, I purchased 24 item number 6602."; let regexp = /(?<!\$)\d+/; let res = strTarget.match(regexp); alert(res); </script>
The syntax for lookbehind negative is shown below.
(?<!B)A
It means match expression A, only where it is NOT preceded by expression B.
In this example expression A is one or more numerical digits, but they are matched only if NOT preceded by expression B. Expression B is a $ sign followed by a numerical digit. So it will find the first numerical match which is NOT preceded by a $ sign.
This example displays the number 24 in a message box.
Lookahead Positive
In the example below, we want to match the item number in the string "I purchased 24 item number 6602 for $12 each."
<script> let strTarget = "I purchased 24 item number 6602 for $12 each."; let regexp = /\d+(?=\sfor)/; let res = strTarget.match(regexp); alert(res); </script>
The syntax for lookahead positive is shown below.
A(?=B)
It means match expression A only where expression B follows.
In this example expression A is one or more numerical digits, but they are matched only if followed by expression B. Expression B is a space followed by the word "for". So it will NOT match the quantity 24, it will match the number 6602.
Note that expression A must be followed immediately by expression B, if this wasn't true, the quantity number would be the match because it is also followed by expression B, in fact it would be the first match.
This example displays the number 6602 in a message box.
Lookahead Negative
In the example below, we want to match the quantity in the string "I purchased 24 item number 6602 for $12 each."
<script> let strTarget = "I purchased 24 item number 6602 for $12 each."; let regexp = /\d+(?!\sfor)/; let res = strTarget.match(regexp); alert(res); </script>
The syntax for lookahead negative is shown below.
A(?!B)
It means match expression A only where expression B does NOT follow.
In this example expression A is one or more numerical digits, but they are matched only if NOT followed by expression B. Expression B is a space followed by the word "for". The first match for one or more numerical digits is the quantity, 24, and since it is not followed by a space and the word "for", it is the qualified match.
This example displays the number 24 in a message box.
In this article you learned how to match a pattern only when it comes after another pattern (or after not that pattern) or only when it comes before another pattern (or before not that pattern). Lookaround syntax can be difficult to master, but it's very powerful.
More Java Script Code:
• Code for a Less annoying Popup Window
• JavaScript Code to Add or Remove Specific Elements of an Array
• JavaScript to Copy and Paste Text to the Clipboard
• Easy Picture Zoom Code
• Easy Code for Animated Banner - Squeeze Text
• Easy Slide Show Code
• Allowing Multiple Selections from Drop-down Select List
• Regular Expressions Boundaries
• Where Did the User Click?
• Change the Case of a Character in a String