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
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