JavaScript Regular Expressions / lesson 3 of 11

Quantifiers

Quantifiers let you match repeating patterns without writing them out by hand.

Play
Transcript

[00:00] When we want to find a repeating pattern in our string using regular expressions, we can use something called a quantifier. So what I’m going to do here is set up a string with one, two, three, four, five, six, seven A’s. And then our rejects is going to be, let’s see, we’re going to find four A’s. And there you go, we have our four A’s identified on the right. And we could do five, and that’s fine too. Now we can shortcut this by saying A, and then use a quantifier. We’ll initialize that with curly brackets, and I’m just going to say four in there.

[00:38] So this first number is how many things do you want? If I change that to five, you can see it highlighted five. Now we can follow that with a comma, and then we’re expecting a max number. But if we don’t put a max, we get infinity. So I can say, let’s do four to infinity. So this is going to say there’s at least four, and then we just go on as long as we keep finding them. But I could also say four and only up to six. So a minimum of four, a max of six, and we’re going to get our six A’s. So that’s great.

[01:13] Now there are some very important or super common patterns that we’re going to take a look at. And the first one is zero to infinity. And this really means zero to or more. It means zero or more. So you can see like, hey, there are zero or more of these guys. And this is so common that we actually have a shorthand for it. And that’s an asterisk. And when I save that, you get the exact same result. The next one is one or more. So that’s one to infinity. So we save that and we get one to infinity. It looks the exact same. And the shorthand for that is a plus symbol. So there you go.

[01:53] Now the last one we’ll look at here is zero or one. This really means optional. Like it might be there or there might be one of these patterns. And when we do that, we get the A. If I throw on global, we get each one. Okay. This one also has a shorthand and that is a question mark. It might be there. It might not be there. And this one’s super common. I’m going to go ahead and update our string and say color or like the British spelling of color and then what we’ll do is we’ll say, we’re looking for color, right? So there it is. But we want to get both of those. So I can hear, I can say zero or one of the use and we get both of them. And of course I can shorthand that with a question mark. And now we get both of them with our shorthand quantifier expression.

[02:46] So I’m going to update our string to have these web addresses in it. This is kind of a contrived example, but I just want to like show a little bit of real world stuff that we can do here. And what we want to try to do, let me just save this. And we want to try to get this web address and this web address, but not this. And certainly not the one that’s not a web address. So to get us started, we’re going to get HTTP. Cool. So we got all three of those, we got all three of those, and then we’re going to have a colon and then we’re going to have two forward slashes. So we’re going to need to escape those one and to save that. Cool. So we got those and now we need to get like, Hey, whatever is after this, right? So while this guy was zero to one here, we’re going to say any character one to infinity and cool. We get them all. And of course we can change this to our shorthand, which is going to be a plus symbol. Save that. And we’re looking good.

[03:51] Now we do have this problem. Now, all of these quantifiers I’ve shown you are what are called greedy quantifiers. And part of the problem with the greedy quantifiers, when I had more here, it just keeps on going. It just says like, yeah, you said everything. Now in this particular situation, making this lazy can be done by adding a question mark, but it’s not really going to work because it’s just going to grab the first letter. So I’ll go through a better example. But what we could do here is we could just say, we’re getting up until.com and now we’ve got our web addresses. So for an example of using a lazy quantifier, let’s try to get everything between quotes and this guy. So we’ve got our quotes and then we just, we’re going to use our shorthand. So any character, one or more between quotes, that kind of works. We did get answer and was and perfect, but we didn’t want was. So what we can do is just change this to a lazy quantifier. So greedy means like get as much as possible and lazy means get as little as possible. So when I save this, boom, we’ve only got the items that fall in between the double quotes. So you can take any existing greedy quantifier and make it lazy by throwing on the existential operator here, the zero or one quantifier after your quantifier.

Quantifiers let you match repeating patterns without writing them out by hand. This lesson covers the full spectrum: exact counts with {n}, ranges with {n,m}, and the three most common shorthand quantifiers — asterisk (*) for zero or more, plus (+) for one or more, and question mark (?) for zero or one. We also tackle the critical distinction between greedy and lazy quantifiers, showing how adding a question mark after any greedy quantifier makes it lazy.

app.js

app.ts
import output from "./output.js";
// ─── Quantifiers — How Many ─────────────────────────────
const str = `aaaaaaa`;
const str = `color or colour`;
const str = `http://el337.com
not a web address
http://
https://www.el337.com`;
const str = `The "answer" was "perfect" again`;
let regex = /aaaa/g;
regex = /a{4}/g;
regex = /a{5}/g;
regex = /a{5,}/g;
regex = /a{5,6}/g;
regex = /a{0,}/g; // * (zero or more)
regex = /a*/g;
regex = /a{1,}/g; // + (one or more)
regex = /a+/g;
regex = /a{0,1}/g; //? (zero or one)
regex = /a?/g;
// update str.
regex = /colou?r/g;
regex = /https{0,1}/g;
regex = /https{0,1}:\/\/.{1,}/g;
regex = /https?:\/\/.+/g;
// add "more"
regex = /https?:\/\/.+\.com/g;
// change str
regex = /".+"/g;
regex = /".+?"/g;
output(str, regex);

Share this post on:

Previous
Plain text
Next
Character Classes