A regular expression is simply a pattern that can be matched against a set of text. Generally, its use falls into two categories:

  • Validation
  • Search and replace

Regular expressions are relatively new to JavaScript, having arrived with Internet Explorer and Netscape Navigator 4. The language with the most usage of regular expressions is Perl, which JavaScript functionality is derived from, although they are also common in UNIX/Linux scripts. Let’s take a look at some regular expression basics; then we’ll see how to use them with JavaScript. You can download our sample code for the article here.

When to take advantage of regular expressions
You can use regular expressions to handle a variety of tasks, including:

  • Validating other user-entered data, such as a credit card or order number.
  • Validating a user’s e-mail address when it’s entered into a Web form.
  • Checking input to ensure that it contains only appropriate words for a chat forum.
  • Checking input to avoid SQL Injection attacks.

For example, suppose you wanted to capture a user’s UK phone number—which is a five-digit area code and then a six-digit phone number. If you combine the two components, separated by a space, you could use the following regular expression:
/^\d{5} \d{6}$/

But this will tell you only that the data the user entered meets the format you defined; it won’t tell you whether it’s a real phone number. For instance, a string of 1s would pass the validation but is not a phone number in the UK. Listing A provides JavaScript code that will validate the number.

Search and replace with regular expressions
The second main use of regular expressions is for search and replace operations. If you are running a chat group where users can enter data, for example, you might want to check the input for swear words and replace them with blanks. Or if you’re checking input that you will later make part of a database query, you might want to check the data to protect yourself from SQL injection attacks.

Off the forms, you can use regular expressions for large search and replace operations through all of your Web pages—for example, to change the year from 2002 to 2003 in the footer of every page.

For this type of task, however, you need to be very careful when creating your regular expression. For instance, if we take the following text:

“I intend to win this game without putting the football through the window as it is the end of the summer and winter is fast approaching.”

And we apply the following regular expression:
replace(/win/g,”lose”)

We would end up with the following text:

“I intend to lose this game without putting the football through the losedow as it is the end of the summer and loseter is fast approaching.”

Reg ex tricks
There are a variety of ways to simplify complex regular expressions. For instance, if you need to match your pattern multiple times, you can simply replace a pattern like \d\d\d\d\d\d with \d{6}. Or you could validate a percentage value with \d{1,3}.

You can also check a pattern for specific characters within the input. For example, if your pattern for a packaging code is capital P followed by five digits, you could use this regular expression:
/^[P]\d{5}$/

Implementing regular expressions in JavaScript
In Listing A, we used regular expressions in JavaScript to validate form entries. Now let’s look at a couple of other examples. First, we might do a simple replace using something like Listing B.

We can perform a match in a similar way. The script in Listing C also lets the user know whether there is a match.

In both of these cases, the input and output variables could be fields on a form. Also, the result of the test is likely to be a little more complex than a simple popup, but I leave that for you to work into your code as the need arises.

Conclusion
You should now have a good grounding in how and when to use regular expressions with your code. Although this tutorial covered their use only in JavaScript, they are also implemented in Java, Perl, and PHP, among others, and are similar in each case.

Regular expressions are a powerful addition to the Web developer’s toolkit. They’re useful for validating form data such as credit card numbers, for removing unacceptable characters from a user-entered parameter before making it part of a SQL query, and even for updating a path on every page in your Web site.