Look Ahead & Behind

[00:00:02]
>> Kyle Simpson: All right, let's talk about some regular expression improvements that, frankly, have been long pending. We've been wanting to have regular expressions in JavaScript be improved for quite a long time, and they basically haven't changed in ten plus years. But as of ES 2018, a set of very helpful changes were added to JavaScript regular expressions.

[00:00:25]
And they weren’t the end, it turns out they were just sort of the beginning of a whole slew of improvements that should be coming to regular expressions over the course of the next several JavaScript revisions. But there were three key ones that landed in ES2018 that we wanna talk about.

[00:00:44]
>> Kyle Simpson: The first one is going to be what we call a lookbehind. But before we understand a lookbehind, you need to make sure you understand hat a lookahead is. So if you haven't done much with regular expression, the idea of a lookahead is essentially an assertion that says, when I match a thing, I wanna lookahead and say that my match only happens if something immediately after this also matches.

[00:01:14]
So I'm not matching both, I'm only matching this thing, but I only wanna match it if the thing right after it is also true. That's an assertion. So common examples of assertions that you probably already used would be, the beginning or end of string anchors, those are essentially assertions.

[00:01:33]
You're saying I wanna match something but only if it shows up at the very beginning of the string. And that's the little carrot symbol. That's your beginning of string anchor, and that's an assertion. Your dollar sign character if your end of string anchor, and that's essentially an assertion.

[00:01:49]
This match should only happen if it happens to be at the very end. So this idea of assertions in regular expressions are saying, in addition to the thing that I'm matching, something else also has to be true. And lookaheads allow us to not just say simple things like beginning or end of string, but also patterns.

[00:02:09]
So here, if I start out with a string, Hello World, and I wanna match a pattern that is l., you notice that it's gonna give me two responses. It's gonna give me the ll, that's from positions two and three in the string. Or it's also gonna give me the l and d, which is from the end of the string positions nine and ten, probably, my math's probably off.

[00:02:35]
But the ld that's at the end of the string. So that's what happens when we don't do any assertion at all. But what if I then put a dollar sign assertion? Well, now I've restricted it to ld. And now we can see in line 9, a different kind of assertion, which is called a lookahead.

[00:02:53]
Lookaheads, by the way, are not new, these have been in JavaScript for 10 plus, almost 15 years probably. And they've also been in almost every other flavor of regular expression that you've probably ever used. So we have this parenthesis-question mark syntax that you see on line 9. And the ?= says, I want to ensure that this pattern, like o, does match.

[00:03:22]
So that's what's called a positive lookahead. On line 12, we see a different syntax, which uses the negate symbol, and that is a negative lookahead. So here we're saying on line 9, I only wanna match an l., If it is followed by an o, which is why we only get the ll.

[00:03:42]
And then, when we say, l., only when it's not followed by an o, you'll notice that we get an lo, and we get an ld, because those two are not followed by an o. So that's positive and negative lookaheads. Well, if we can do lookaheads, it makes sense that we would want to sometimes also do lookbehinds.

[00:04:08]
We would want to assert that something behind our match was true or not true. Unfortunately, JavaScript for all of its history has not supported lookbehinds. We had lookaheads but not lookbehinds. And it's been a major kind of missing feature for our regular expressions. Lookbehinds have been hacked into, like we've hacked ways to do lookbehinds.

[00:04:33]
Like for example, reversing the string and doing a lookahead with a reversed pattern, which is bonkers, that's a terrible idea. But that's an example of how people have tried to work around, or hack around, not having positive and negative lookbehinds. As of ES2018, we now officially have support for positive and negative lookbehinds.

[00:04:56]
And it's a very similar syntax to what we had before, but now it has the less than symbol in it. So on line 3 we're saying, only matching an l., if it is preceded by an e, which is why we get the ll match. And then line six we're saying only match and l., if it's not preceded by e, which is why we get the lo and the ld match.

[00:05:22]
>> Kyle Simpson: So we now have both positive and negative lookaheads and lookbehinds. So that's the first big improvement to regular expressions, being able to do lookbehinds. And if you work with regular expressions at all, there's a pretty good chance that you've probably been frustrated by these. And now, knowing that you have both of them, hopefully you can improve your regular expressions.