Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Regular Expressions in JavaScript!
You have completed Regular Expressions in JavaScript!
Preview
Reformat the phone number users enter into the form. This will help them see at a glance whether they entered it correctly or not.
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
When our users Tab away from
the telephone number input,
0:00
let's reformat it to
make it more readable.
0:04
If they see it in a format they expect,
0:07
it can help them know at
a glance if it's correct or not.
0:09
We want to do this reformatting when
the user is completely done typing.
0:13
The act the user takes when they're
satisfied with the form input
0:17
is to move focus away from the input.
0:21
The blur event occurs on an input
element when it loses focus.
0:24
Let's use the blur event on this
input to trigger our handler.
0:28
I'll add a handler to the telephone input
variable with addEventListener using
0:35
the blur event.
0:39
I'll just copy this, paste it below,
and I'll replace input with blur.
0:43
And for the second argument,
to the addEventListener,
0:52
I'll pass a function that
accepts an event object.
0:56
As a parameter.
1:02
When the input blurs,
1:05
we want to replace the input's
value with our reformatted input.
1:06
So I'll set e.target.value to equal
1:11
the output of
the formatTelephone function.
1:15
I'll pass the value from the input
into the formatting function.
1:23
Now we need to write the body of
the formatTelephone function to return
1:32
a formatted phone number.
1:37
The function receives
a string as its input.
1:39
We want to call replace on the string.
1:42
We'll need to use capture groups to store
the numerals from the text in the variable
1:48
inside.
1:53
I'll go ahead and create a regular
expression above this line.
1:54
If you think about it, we'll actually
start with the exact same regex we used
2:03
when validating the phone number.
2:07
We'll want to match the three
groups of numbers, allowing for
2:10
other characters in between.
2:13
So I'll just copy this,
and paste it in below.
2:16
This time we'll capture the numeral
sequences with parentheses.
2:23
Like so.
2:38
I'll pass the variable with the regex
as the first argument to replace.
2:40
Then, I'll use these captured
groups to build a new string.
2:47
I'll return this formatted string from
the function using the return keyword.
3:00
Let's test it out in a browser.
3:05
And refresh, enter a 10 digit number.
3:09
And great, it works.
3:14
Thanks for completing this course with me.
3:18
Now that you know about
regular expressions,
3:20
I bet you'll find many uses for them.
3:23
Some of the places you'll
use them might surprise you.
3:25
For example,
3:29
most code editors let you use the power of
regular expressions to search and replace.
3:30
There's more to learn about
regular expressions, too.
3:35
If you want to look deeper into them,
check the teacher's notes for resources.
3:39
I'll see you later.
3:43
Till then, have fun coding.
3:45
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