Cleaning Up Form Entries - Exercise

Contact Us or call 1-877-932-8228
Cleaning Up Form Entries - Exercise

Cleaning Up Form Entries

Duration: 15 to 25 minutes.
  1. Open RegularExpressions/Exercises/PhoneCleaner.html for editing.
  2. Where the comment indicates, declare a variable called cleanedPhone and assign it a cleaned-up version of the user-entered phone number. The cleaned up version should fit the following format: (555) 555-1212
  3. Test your solution in a browser.

Challenge

Some phone numbers are given as a combination of numbers and letters (e.g, 877-WEBUCATE). As is the case with 877-WEBUCATE, such numbers often have an extra character just to make the word complete.

  1. Add a function called convertPhone() that:
    • strips all characters that are not numbers or letters
    • converts all letters to numbers
      • ABC -> 2
      • DEF -> 3
      • GHI -> 4
      • JKL -> 5
      • MNO -> 6
      • PQRS -> 7
      • TUV -> 8
      • WXYZ -> 9
    • passes the first 10 characters of the resulting string to the cleanPhone() function
    • returns the resulting string
  2. Modify the form, so that it calls convertPhone() rather than cleanPhone().
  3. Test your solution in a browser.

Solution:

RegularExpressions/Solutions/PhoneCleaner.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Phone Cleaner</title>
<script type="text/javascript">
var rePhone = /^\(?([2-9]\d\d)\)?[\-\. ]?([2-9]\d\d)[\-\. ]?(\d{4})$/;

function cleanPhone(phone){
	if (rePhone.test(phone)) {
		var cleanedPhone = phone.replace(rePhone, "($1) $2-$3");
		return cleanedPhone;
	} else {
		alert("INVALID PHONE");
		return phone;
	}
}

</script>
</head>
<body>
	<form onsubmit="return false;">
		<input type="text" name="Phone" size="20">
		<input type="button" value="Convert Phone" 
			onclick="this.form.Phone.value = cleanPhone(this.form.Phone.value);">
	</form>
</body>
</html>

Challenge Solution:

RegularExpressions/Solutions/PhoneCleaner-challenge.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Phone Checker</title>
<script type="text/javascript">
var rePhone = /^\(?([2-9]\d\d)\)?[\-\. ]?([2-9]\d\d)[\-\. ]?(\d{4})$/;

---- C O D E   O M I T T E D ----

function convertPhone(phone){
	var convertedPhone;
	convertedPhone = phone.replace(/[^A-Za-z\d]/g, "");
	convertedPhone = convertedPhone.replace(/[ABC]/gi, "2");
	convertedPhone = convertedPhone.replace(/[DEF]/gi, "3");
	convertedPhone = convertedPhone.replace(/[GHI]/gi, "4");
	convertedPhone = convertedPhone.replace(/[JKL]/gi, "5");
	convertedPhone = convertedPhone.replace(/[MNO]/gi, "6");
	convertedPhone = convertedPhone.replace(/[PQRS]/gi, "7");
	convertedPhone = convertedPhone.replace(/[TUV]/gi, "8");
	convertedPhone = convertedPhone.replace(/[WXYZ]/gi, "9");
	return cleanPhone(convertedPhone.substr(0, 10));
}
</script>
</head>
<body>
	<form onsubmit="return false;">
		<input type="text" name="Phone" size="20">
		<input type="button" value="Convert Phone" 
			onclick="this.form.Phone.value = convertPhone(this.form.Phone.value);">
	</form>
</body>
</html>
Next