Preview
Video Player
00:00
00:00
Using Replace with Captured Groups
6:03Captured 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.
[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