JavaScript: The Recent Parts

Named Capture Groups

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Named Capture Groups" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

Kyle introduces a method to organize regular expressions and make them more human readable.


Transcript from the "Named Capture Groups" Lesson

>> Kyle Simpson: Another feature that regular expressions have added is called named capture groups. So before you understand what a named capture group is, you need to make sure you understand what a capture group is. So on line 3 here, you'll notice that I am using a parentheses set. On line 3, that parentheses set is saying, (l.).

And in regular expressions, parenthesis are not just grouping operators, although they have that effect, they are also capturing operators. Which means that the output that we see here on line 4 has both the larger scale match, which was ell. And then, the next thing in there was the captured group, which in this case, the first capture group, which in this case was ll.

So a capture group is a way to have a sub part of the pattern pulled out in a separate way. And we use those for back references, like line 6. So here I'm saying whatever comes before the o, and then, I have a back \1 that says match that same thing later in the pattern.

But whether you use them to pull them out in matches, or whether you use them for back references, we have always, up to this point, had to use numeric references to these groups. So it ends up where you have this big, long, regular expression, and you have to count your open parenthesis.

And say, that's like capture group seven, and that's capture group four and weird stuff like that. And it makes regular expression really, really hard to manage. So now we have the ability, like you seen on line 9, when you make a capture group, you can give it a good useful name.

So on line 9, for example, I am using the syntax question mark, and then, those angle brackets, and that gives a parentheses set an actual name. In this case, cap. So I'm saying, make a capturing group called cap. And how do we reference, or how do we use that?

You'll notice that the object that we got back had a groups property on it, and inside of groups, we have a named property called cap. So we can access any named capturing groups from our regular expression and whatever values were in those named groups. We can also use this syntax over here to refer to the, in a back reference form, instead of saying \3 capturing group, we can say \k, and then the name of the capturing group that we wanna reference.

And it will drop in that into the pattern. We can use those in our replace, like we're doing here on line 15. On line 15, we can say $ <>, and then, use the name of our capturing group in a replace pattern. And we can also receive that, as you see on line 18 and 19, we can receive it in the function callback that we pass to replace.

So in other words, when you wanna do capturing groups, instead of having to juggle all theses numbers, and every time you add a new parenthesis, now all your numbers are off, give your captured groups good semantic names. Say you have a regular expression that's gonna match a date and we have the US date format, and you wanna name the capture group for month and call it month.

And then name the capture group for day and call it day. And then one for year. Instead of having one, two, and three, which aren't semantic and they're harder to maintain.
>> Kyle Simpson: So that's the second of our features that we have added to regular expressions in ES2018.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now