Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Captured groups make regular expressions even more powerful by allowing you to pull out patterns from within the matched pattern. Then you can rearrange the matched strings as needed.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
We've seen that regular expressions
normally work one character at a time.
0:04
For example, in this regular expression,
0:09
the question mark applies
only to the single letter e.
0:12
It matches zero or one e character.
0:16
So this regex matches axe spelled with or
without a final e.
0:18
But I also showed you how you can use
parentheses to group multiple characters.
0:24
So we can treat character
sequences like single characters.
0:29
For example, by adding parentheses in this
regular expression, we can treat the www.,
0:33
as a single character optionally
matching the www.nurl.
0:40
In addition to the flexibility they
provide when matching patterns,
0:46
parenthesis also store or capture
the parts of the strings they match.
0:50
This let's you replace
patterns in a string.
0:55
For example, you might want to take
a string containing a name like
0:58
Joaquin Smith, and reorder it so
the last name appears first.
1:01
Like Smith, Joaquin.
1:06
You can do that with
regular expressions easily.
1:08
Let me show you how you can
use parentheses to group and
1:12
capture sets of characters.
1:15
Parentheses capture the parts
of the string they match.
1:18
You can use these captured
groups with a $ sign,
1:21
followed by a number which matches
the index of the captured group.
1:24
For example, the pattern you
see here matches this string.
1:29
The two sets of parentheses capture
two values, the first word character,
1:33
or s, and the digit character, the 8.
1:38
Be careful here.
1:42
JavaScript indexing is generally
0 based as with arrays.
1:43
However, captured values in a regular
expression always begin at an index of 1.
1:47
We can use these stored values
with JavaScript replace method.
1:54
If we use replace with the string,
Hello, my name is Joel, for example,
1:58
and the regular expression, my name is,
followed by a parenthesis surrounding one
2:03
or more word characters and then a dot,
the captured string will be the name Joel.
2:08
We can then give the replace
method a string to
2:14
put in place of the matched pattern.
2:17
For this example, I'll use $1!
2:20
The $1 retrieves the stored value Joel.
2:24
Then Joel!, replaces the match portion
of the string, resulting in Hello Joel!
2:28
Let's try these out in a Console.
2:36
In the DevTools Console,
I'll create a string.
2:38
Now, I'll use the replace method on it and
2:42
parse in a regex that
captures each character.
2:45
This regex will match the whole string,
meaning,
2:56
the entire string would be replaced.
3:01
The a will be in $1,
the b in $2 and the c in $3.
3:05
I'll reverse the values and new string and
place spaces in between each character.
3:10
Now let's look at a more useful example.
3:19
Let's say that a user is entering numerals
and we want to put a decimal before
3:21
the two rightmost characters and
a dollar sign on the far left.
3:25
I'll create a string of numerals and
store it in string.
3:30
To do this, we should first capture
all the numerals before the last two,
3:36
then capture the last two separately.
3:40
I'll create a regex with
two captured groups.
3:44
The first one matches zero or
more digit characters.
3:52
And the second one matches
two digit characters.
3:57
For the replacement string,
We want to start with a $ sign,
4:02
space, then the first captured group,
a decimal and the second captured group.
4:09
Now we can use these
variables with replace.
4:17
It looks a little funny to me to have
the $ sign a space away from the numerals,
4:28
I'm used to seeing it without a space.
4:32
I'll modify my replacement
string by pressing up arrow my
4:34
keyboard until I see it again,
and I'll take the space away.
4:38
And I have already declared replacement.
4:44
So I need to just use this
statement without let, and
4:47
then it will just re-assign the variable,
okay.
4:51
Now, I'll press my up arrow twice,
4:57
three times to get to
the replacement method again.
4:59
And the result is not what I expected.
5:05
In a string pass to replace,
5:07
two $ signs in a row means a literal $
sign should be place in the return string.
5:09
So the JavaScript interpreter
is seeing these two $ signs and
5:15
printing a single $ sign.
5:19
Then it sees the 1 and
prints it literally also,
5:21
instead of accessing
the first captured group.
5:24
The second captured
group is printed though.
5:28
To fix this,
we need to use three $ signs in a row.
5:31
The first two, we'll print
a literal $ sign and the third,
5:36
we'll join forces with the 1 to
access the first captured group.
5:40
Now when I run the replace method,
we see what we expect.
5:47
Let's use what you just learned to
reformat the telephone number users put
5:51
into our form.
5:55
First though, we'll need to relax
the restrictive telephone number
5:56
validator we wrote earlier.
6:00
We'll do that in the next video.
6:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up