Transcript
[00:00] When we want to capture the beginning or end of a line in JavaScript regular expressions, we can use something called line anchors. So I’m going to set up a date here of 12, 1, 30. I’m going to come down here and say I want to capture the 12, right? That works great. But if I add another date after this and I’ll say 12, 30, 35. Now I’m getting both of those. But what I want to say is I only want to get the one at the very beginning of the line. So if the line begins with 12, that’s what I want.
[00:31] And we can do that by adding a caret here. Now we’ve used carets in the past as part of a character class. So you’ve got a character class and you put a little caret at the beginning of it. And that means negate whatever’s in this character class. But outside of that context in regular expressions, this symbol, this character, the caret operates as a line beginning operator. And if I save that, boom, you can see we’ve got the line that begins with 12.
[01:00] So we’re talking about lines. Let’s break this out into a second line. And we run into our first problem, which is that we’ve got two lines that begin with 12, but we’re only capturing the first one. So to illustrate the problem, I’m going to log out the execution of that. And when I save this and load it up here, we can see that our input just, it’s a single string that happens to have a line break in it. And this regular expression that we have here is not respecting the fact that these are individual lines.
[01:31] So what I can do is introduce a new flag. This is the M flag for multi lines. So now it will treat each of these lines as a line. And you can see that we are in fact capturing the 12 at the beginning of each of these lines. So let’s go ahead and make our string a little more complicated. And this isn’t bad. We are getting the 12 at the beginning of each of these lines. But let’s say we only want to get the lines that begin with 12 and end with 30.
[02:01] So we don’t want this guy. So we’re going to say that we have some amount of characters and then we have a 30. I’ll save that. And that sort of works, except we’re getting this 1230 still. So we need to identify that this 30 needs to be at the end of the line. And our line ending operator is the dollar sign. So now we’re saying we want a line that begins with 12 as some amount of characters after that and then ends with 30. And when I save that, you can see we get exactly what we wanted. We’ve got 12, 1, 20, 30 and 12, 12, 20, 30.
Line anchors let you match the beginning or end of a line, not just the beginning or end of the entire string. This lesson covers the caret (^) and dollar sign ($) as line anchors, and the critical difference between matching a string’s boundaries versus matching individual lines. You’ll learn about the multi-line flag (m) that makes ^ and $ match at each line break, and build a pattern that matches lines starting with one value and ending with another.
app.js
import output from "./output.js";// When we want to capture the beginning// or end of a line we can use something// called a line anchorlet str = `12/1/30`;let regex = /12/g;
str = `12/1/30 12-30-35`;regex = /^12/g;
// we've used carets in the past// inside of character classes where// they represent the negation of// whatever characters are inside of// that character class. Outside of a// character class a caret is used// as a line beginning operator
str = `12/1/3012-30-35`;regex = /^12/g;
console.log(regex.exec(str));
str = `12/1/3012-30-35`;regex = /^12/gm;
str = `12/1/3012-30-3511/12/3012-12-2030`;regex = /^12/gm;
regex = /^12.+30/gm;regex = /^12.+30$/gm;
output(str, regex);