Home arrow JavaScript arrow Page 7 - Regular expressions in JavaScript
JAVASCRIPT

Regular expressions in JavaScript


JavaScript is useful for a lot more than opening pop-ups. If you use HTML forms on your website, and want to make sure that your visitors submit valid data on those forms, you might want to consider using some regular expressions in JavaScript. Alejandro Gervasio explains how, with many excellent examples.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 248
December 20, 2004
TABLE OF CONTENTS:
  1. · Regular expressions in JavaScript
  2. · The Basics
  3. · Character Escaping
  4. · Repetition
  5. · Counted Subexpressions
  6. · Using regular expressions in JavaScript
  7. · The match() method
  8. · The replace() method
  9. · The test() method

print this article
SEARCH DEVARTICLES

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
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials