Reformatting a Telephone Number3:47 with Joel Kraft
Reformat the phone number users enter into the form. This will help them see at a glance whether they entered it correctly or not.
Resources for Further Study of Regular Expressions
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 up