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
Make the telephone validator we wrote earlier more flexible, allowing users to format their input any way they choose.
Resources
The following regex expression can match phone numbers while not allowing for non-digit (a-z) characters:
1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}
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
Remember the telephone
validator we wrote earlier?
0:00
To create valid input, a user is expected
to manually format the phone number with
0:03
parentheses [SOUND], a space,
[SOUND] and a hyphen.
0:08
This doesn't provide a very good
experience since our users have
0:12
no flexibility in how they
type in their phone number.
0:15
Some users might feel more comfortable
formatting the number complete with
0:19
parentheses and hyphens [SOUND].
0:23
But a lot of other people would
probably rather just enter the numbers.
0:25
Let's create a regular expression
that can recognize a telephone number
0:29
whether users format it or not.
0:34
I'm in app.js, and here's the telephone
validator we wrote earlier.
0:36
To write regular expressions, I find it
helpful to work in a tool like RegexPal so
0:42
I can see immediately if I'm
on the right track or not.
0:47
I'll copy this Regex and
paste it into RegexPal.
0:50
Down below, I've already put in both
kinds of numbers I want to accept.
0:56
If you're pasting in,
1:00
you might have to type a bit to get
RegexPal to recognize the input.
1:01
I'll just press Space bar and
Backspace, and
1:06
you can see,
the lower test strings is highlighted.
1:09
Now we're ready to work.
1:13
I could make non-numeral characters
optional by putting question marks
1:14
after each one, like this.
1:18
Now both strings pass, but what if
the user puts two spaces instead of one?
1:28
Or spaces the parentheses out and
the hyphen?
1:36
Because the question marks match zero or
one of these specific characters,
1:42
this regex is more flexible,
but it can still break.
1:46
Instead of specifying the characters
we expect from the user,
1:50
let's let the user type
any non-numeral character.
1:53
I'll replace all of these
special characters with a \D,
1:57
which matches any non-numeral character.
2:04
To match zero or more non-numerals,
replace the question marks with asterisks.
2:14
[BLANK AUDIO] I can get
rid of one of these
2:19
non-numeral characters since I'm using
2:25
an asterisk to match any repetition.
2:30
I'll also put a \D at the end to
match trailing spaces, for example.
2:36
All of our test strings pass now.
2:44
I'll copy this regex and paste it into our
code, replacing what I had there before.
2:46
When you're pasting in, remember not
to replace the first or the last slash.
2:53
As those are characters that JavaScript
uses to know this is a regular expression
2:58
and not really part of
the regular expression, itself.
3:03
Let's go look and see what we get.
3:07
I've gotta refresh.
3:15
Great, works, now that we've relaxed the
rules of what we'll accept from the user,
3:20
let's use JavaScript's replace method
to reformat the telephone number.
3:25
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