1
00:00:00,470 --> 00:00:03,540
Remember the telephone
validator we wrote earlier?

2
00:00:03,540 --> 00:00:08,440
To create valid input, a user is expected
to manually format the phone number with

3
00:00:08,440 --> 00:00:12,540
parentheses [SOUND], a space,
[SOUND] and a hyphen.

4
00:00:12,540 --> 00:00:15,930
This doesn't provide a very good
experience since our users have

5
00:00:15,930 --> 00:00:19,260
no flexibility in how they
type in their phone number.

6
00:00:19,260 --> 00:00:23,016
Some users might feel more comfortable
formatting the number complete with

7
00:00:23,016 --> 00:00:25,240
parentheses and hyphens [SOUND].

8
00:00:25,240 --> 00:00:29,750
But a lot of other people would
probably rather just enter the numbers.

9
00:00:29,750 --> 00:00:34,366
Let's create a regular expression
that can recognize a telephone number

10
00:00:34,366 --> 00:00:36,382
whether users format it or not.

11
00:00:36,382 --> 00:00:42,230
I'm in app.js, and here's the telephone
validator we wrote earlier.

12
00:00:42,230 --> 00:00:47,170
To write regular expressions, I find it
helpful to work in a tool like RegexPal so

13
00:00:47,170 --> 00:00:50,680
I can see immediately if I'm
on the right track or not.

14
00:00:50,680 --> 00:00:54,335
I'll copy this Regex and
paste it into RegexPal.

15
00:00:56,340 --> 00:01:00,550
Down below, I've already put in both
kinds of numbers I want to accept.

16
00:01:00,550 --> 00:01:01,670
If you're pasting in,

17
00:01:01,670 --> 00:01:06,440
you might have to type a bit to get
RegexPal to recognize the input.

18
00:01:06,440 --> 00:01:09,910
I'll just press Space bar and
Backspace, and

19
00:01:09,910 --> 00:01:13,240
you can see,
the lower test strings is highlighted.

20
00:01:13,240 --> 00:01:14,700
Now we're ready to work.

21
00:01:14,700 --> 00:01:18,993
I could make non-numeral characters
optional by putting question marks

22
00:01:18,993 --> 00:01:20,662
after each one, like this.

23
00:01:28,970 --> 00:01:33,630
Now both strings pass, but what if
the user puts two spaces instead of one?

24
00:01:36,180 --> 00:01:38,496
Or spaces the parentheses out and
the hyphen?

25
00:01:42,440 --> 00:01:46,790
Because the question marks match zero or
one of these specific characters,

26
00:01:46,790 --> 00:01:50,220
this regex is more flexible,
but it can still break.

27
00:01:50,220 --> 00:01:53,810
Instead of specifying the characters
we expect from the user,

28
00:01:53,810 --> 00:01:57,830
let's let the user type
any non-numeral character.

29
00:01:57,830 --> 00:02:04,158
I'll replace all of these
special characters with a \D,

30
00:02:04,158 --> 00:02:09,076
which matches any non-numeral character.

31
00:02:14,890 --> 00:02:19,887
To match zero or more non-numerals,
replace the question marks with asterisks.

32
00:02:19,887 --> 00:02:25,265
[BLANK AUDIO] I can get
rid of one of these

33
00:02:25,265 --> 00:02:30,646
non-numeral characters since I'm using

34
00:02:30,646 --> 00:02:36,070
an asterisk to match any repetition.

35
00:02:36,070 --> 00:02:41,740
I'll also put a \D at the end to
match trailing spaces, for example.

36
00:02:44,100 --> 00:02:46,319
All of our test strings pass now.

37
00:02:46,319 --> 00:02:53,100
I'll copy this regex and paste it into our
code, replacing what I had there before.

38
00:02:53,100 --> 00:02:58,340
When you're pasting in, remember not
to replace the first or the last slash.

39
00:02:58,340 --> 00:03:03,680
As those are characters that JavaScript
uses to know this is a regular expression

40
00:03:03,680 --> 00:03:06,220
and not really part of
the regular expression, itself.

41
00:03:07,230 --> 00:03:08,856
Let's go look and see what we get.

42
00:03:15,656 --> 00:03:16,357
I've gotta refresh.

43
00:03:20,464 --> 00:03:25,286
Great, works, now that we've relaxed the
rules of what we'll accept from the user,

44
00:03:25,286 --> 00:03:29,595
let's use JavaScript's replace method
to reformat the telephone number.