Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Regular Expressions in JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

A Better Telephone Number Validator

3:29 with Joel Kraft

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}

Review examples and test matching phone numbers.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up