As part of the Javascript Algorithms And Data Structures Certification you need to complete 5 javascript programs, telephone number validator being one of them. Up next I have quoted the explanation from freeCodeCamp's website.
Return trueif the passed string looks like a valid US phone number.
The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants):
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
For this challenge you will be presented with a string such as 800-692-7753or 8oo-six427676;laskdjf. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is 1. Return trueif the string is a valid US phone number; otherwise return false.
Solution: Step-by-Step
var regex
The only way to solve this problem is by using regex
. Regex, short for regular expression, is a specially encoded string of text that allows you to create patterns that help match, locate, and manage text.
For this exercise, I used regexpal.com. On this site you can enter different regular expressions and it will tell you what each piece of text does when you hover over them.
To learn more about regex you can also take a look at regexr.com or, even better, at the cheat sheet from rexegg.com
/ ... /;
the /
indicate the start and the beginning of a regular expression.
^ ... $
^
matches the beginning of the string and $
matches the end of it. Adding this ensures that the number being validated will have a maximum number of characters.
(1\s?)
First, we want to validate the 1
country code. For this, we will enclose the expression validating this section on a (parentheses).
Second, the contry code is 1
so we add that. \s
means whitespace character and the following ?
means for there to be one or none of the preceding expression, which in this case means there can be one whitespace character or none at all.
?
Maybe the number entered has the country code, but maybe it doesn't. That is why we include an extra ?
outside of the first (parentheses). There can be one of the expression inside the parentheses or nothing.
(\(\d{3}\)|\d{3})
Next, we will need to validate the following three digits located after the country code. These numbers can be inside a (parentheses) or not.
\(
means that it matches the character (
. \d
is for matching one digit from 0 to 9, while {3}
changes that from being one digit to three digits. The parentheses needs to be closed so you need to add a \)
to match the encosing parentheses surrounding those three digits.
Since this first set of three digits may or may not be enclosed inside parentheses we need to add \d{3}
which matches three digits alone. In between these two we have to add a |
character, which means "or". In other words, match 3 digits inside the parentheses or 3 digits without parentheses.
[\s\-]?
Next, we need to check for possible single spaces or dashes.
The brackets are used to match any characters inside the set. \s
matches a whitespace character, \-
matches a dash, and the ?
outside of the brackets means that only one or none of the conditions inside the brackets is allowed.
\d{3}
Include one digit between 0 and 9 three times. In other words, it validates only when a three digit number is entered.
[\s\-]?
Next, we need to check for possible single spaces or dashes.
The brackets are used to match any characters inside the set. \s
matches a whitespace character, \-
matches a dash, and the ?
outside of the brackets means that only one or none of the conditions inside the brackets is allowed.
\d{4}
Same as above, only this validates only if it is a four digit number.
return regex.test(str)
This part of the code is used to test the str
entered. If the number is validated it will return the boolean true
.
Maybe you want to return something else? You can replace this line with an if/else statement, or a ternary operator like the following return regex.test(str) ? "text" : "text2";
which will return the string "text" if regex.test(str)
is true and "text2" if it is false.