Regular expressions in JavaScript

Regular expressions in JavaScript - The match() method
(Page 7 of 9 )

The match() method takes a regular expression as a parameter and returns an array of all the matching strings found in the string given. If no matches are found, then match() returns false. Let�s say we want to check the proper format for a phone number entered by a user, with the form of  (XXX) XXX-XXXX. The code listed below does that:

function checkPhone( phone ) {
  phoneRegex = /^\(\d\d\d\) \d\d\d-\d\d\d\d$/;
 if( !phone.match( phoneRegex ) ) {
  alert( �Please enter a valid phone number� );
  return false;
 }
 return true;
}

Let�s break down the code to understand how it works. First, we define a function that will check if the phone number entered has a valid format. Next, we declare the regular expression to define our pattern. It begins with ^, to indicate that any match must begin at the start of the string. Then we have \(, which will match the opening parenthesis. As seen previously, the character is escaped with a backslash to remove its special meaning in regular expression syntax. As mentioned, \d is a special code that matches any digit. The expression \d\d\d matches any three digits (same effect is achieved with [0-9] [0-9] [0-9]).

The rest of the pattern is pretty easy to understand. \) matches the closing parenthesis, the space matches the proper space for the phone number, then \d\d\d-\d\d\d\d matches three any digits followed by a dash, and then followed by four any digits.Finally, the $ indicates that any match must end at the end of the string.

It�s possible to short the regular expression as follows:

phoneRegex = /^\(\d{3]\) \d{3}-\d{4}$/;

Once we have seen in detail the regular expression pattern, let�s see how our function works. It checks whether or not the string contained in phone, passed as a parameter, matches our regular expression. If it does, then an array will be returned which JavaScript will evaluate as true. Otherwise it will return false, displaying the proper error message to the user.This kind of function is commonly used to validate user input data coming from HTML forms, chaining several specific functions to check if data entered is valid or not.

Here is an example:

First, the JavaScript code located in the HEAD section (or even better, in a separate .js file)

<script language=�javascript�>
validateForm = function() {
 if ( checkPhone( this.phone, �Please enter a valid phone number� ) ) {
  return true;
 }
 return false;
}
checkPhone= function( field, errorMsg) {
  phoneRegex = /^\(\d{3]\) \d{3}-\d{4}$/;
  if( !field.match( phoneRegex ) ) {
  alert( errorMsg );
  field.focus();
  field.select();
  return false;
 }
 return true;
}
signupForm = document.forms[0];   // assumes that it�s the first form present in the document
signupForm.onsubmit = validateForm;
</script>

And the HTML form code is the following:

<form action=�signup.htm�>
<p>Phone number ( e.g. (123) 456-7890):<input type=�text� name=�phone� /></p>
<p><input type=�submit� value=�send� /></p>
</form>

The user will be unable to submit this form unless a valid phone number has been entered. If the number format is not valid, an error message will be displayed (generated by our validateForm function).

As stated above, it�s easy to add more functionality to our validateForm() function. If we want to apply more than one check to the form, we can embed several calls to specific functions to perform particular validation, achieving something like this:

validateForm=function () {
 if ( checkPhone( this.phone, �Please enter a valid phone number� ) && checkEmail( this.email, �Please enter a valid email address� ) ) {
  return true;
 }
 return false;

The code is very compact and is separated completely from the HTML.

Next, it�s time to see another useful JavaScript method for working with regular expressions: the replace() method.

blog comments powered by Disqus