Transcript
[00:00] So capture or capturing groups in regular expressions allow us to group together characters that we want to work with in our regular expression, and then we can apply quantifiers to them. It’s actually very straightforward. So here is some text. I got foo, foobar, foobaz, and fooboo. We already know how to get foo or foobar. All that works. If we want to get foo followed by bar or baz, we can use a capture group. So to convert this into a capture group, I just wrap it in parentheses. Everything works the same. This is not a character class, so the order here actually matters. This needs to be bar in that order and that casing in this case. So now I’m going to use alternation. I’m going to throw in a pipe delimiter here, and I’m just going to say fooboo. So now I get foobar and fooboo. And if I want to add a quantifier to this, I can say foo followed by one or more elements that I’m willing to accept in this capturing group. Save that, and I get all the foos, but not foobaz, and I get foobar and fooboo. So that’s pretty cool.
[01:15] Now we can reference these in a few different ways. There we’ll logout. sdr.replace.regex. And then I’m just going to plug in $1. And if we look here, we get all of our guys. And what’s happening, and it’s a little hard to tell, but we are getting the pass-through string, and then bar. You’ll see we’re just getting bar, because that is what’s in our capturing group. And then we’re just getting boo. To make that a little clearer, I am going to put some asterisks around those guys. So now we can see them a little better. So there’s bar, and there’s boo, and this one, $1, is our capture group. Like we’re referencing the one capture group that we have in place. I mean, technically, I don’t know if I’m going to break all this, but if I did that, one becomes foo, and this becomes two, and then we get the exact same results, because this is the first, or one, capture group, and this is the second identified by $2.
[02:19] Now, I will also point out that, and you can see it pretty clearly there in the regular expression, this is causing use of memory. Like we have a reference, this $1 is a reference to the capture group. Now, we can opt out of that reference, storing that memory with a question mark colon here. And when I do that, it’s going to be like, oh, I don’t know what the hell a $1 is. And that’s fine. This all still works. What I can do is say, str.match, regex. And you can see that we do still get our values. We’re just getting rid of the reference to the values.
[03:06] We are going to change up here. We’re going to drop in a phone number. I’m going to say 800-867-5309. There’s our phone number. And not dots. We’ll do dashes, because all phone numbers are formatted perfectly. Okay. So we are going to create a capture group for each of these. So we’re going to try to capture the three elements here. So we’re going to have one, two, three capture groups. They’re going to be separated by dashes. They’re each going to have digits. So we know that. And then our quantifier here is going to be three. For the second part, it is also going to be three. And for the last one, it’ll be four. So we have our three capture groups, area, exchange, and line. And now we’re going to try to like get at those. So I’m going to say let match equal execution of our string. So now if we want to reference those capture groups, we can grab them out of this match. So I can say console log. First, we’ll say full match. And that’ll be match zero. And we can see we got our full match, which is the entire string. And that’s why we know that this guy is going to be one. This guy is going to be two. And this guy is going to be three. Because zero is set aside for the full match. Second one, we’re going to say area one. Save that. And you can see we’ve correctly identified our area code, our exchange. It’s going to be match two. We can see that there in the console. And for three, the line 5309. Awesome. Now, this totally works. There’s nothing wrong with this. But there is another way that we can reference these that is really powerful. It’s super helpful.
[04:51] So right here inside of our capture group, I’m going to give each of these a name. And the way we do that is with question mark. And then inside of less than and greater than, we put our name. So this one I’m going to call area, call this one exchange, and this one is line. And then I can come down here and update all of these as .groups. And then each one will have its name. So this will be area. This will be exchange. And this will be line. So I save those. We get the exact same results. But now we have named groups that we can reference more easily instead of trying to remember which position they are in the match array.
Capturing groups let you group parts of a pattern together and reference them later. This lesson covers parentheses for grouping, alternation with the pipe (|), applying quantifiers to groups, and referencing captured content with $1, $2, etc. You’ll learn about non-capturing groups (?:…) to avoid memory overhead, and the powerful named groups syntax and .groups. A practical phone number parsing example ties it all together.
app.js
import output from "./output.js";// ─── Positional Groups ──────────────────────────────────
let str = `foofoobarfoobazfooboo`;
let regex = /foo/g;// regex = /foobar/g;// regex = /foo(bar|boo)/g;// regex = /foo(bar|boo)?/g;// regex = /foo(bar|boo)/g;// console.log(str.replace(regex, "**$1**"));// regex = /foo(?:bar|boo)/g;// console.log(str.match(regex));
str = `555-867-5309`;regex = /(\d{3})-(\d{3})-(\d{4})/;let match = regex.exec(str);console.log("full match", match[0]);console.log("area code", match[1]);console.log("exchange", match[2]);console.log("line", match[3]);
regex = /(?<area>\d{3})-(?<exchange>\d{3})-(?<line>\d{4})/;match = regex.exec(str);console.log("area code", match.groups.area);console.log("exchange", match.groups.exchange);console.log("line", match.groups.line);
output(str, regex);