Regular Expressions in JavaScript

If you’ve ever programmed in Perl, or have had to work as a Unix system administrator, then you probably already have more than a passing familiarity with regular expressions. But even if Perl looks like spaghetti to you and you feel that no mere mortal is equipped to manage a Unix system, the fact that JavaScript includes support for Perl-style regular expressions is good news... trust me!

In this article, I’ll start out by explaining what, exactly, regular expressions are and what they can do for you. I’ll then present an overview of the most common features of regular expressions (which the Perl aficionados in the audience can safely skip over). Finally, I’ll finish off by explaining how regular expressions are used in JavaScript, with a practical example or two to help the concepts gel. By the end of this article, you’ll probably still be a mere mortal, but you’ll certainly be able to impress at parties with your newly acquired text juggling skills!

What are they?

Regular expressions use special (and, at first, somewhat confusing) codes to detect patterns in strings of text. For example, if you’re presenting your visitors with an HTML form to enter their details, you might have one field for their phone number. Now let’s face it: some site visitors are better at following instructions than others. Even if you put a little hint next to the text field indicating the required format of the phone number (e.g.: “(XXX) XXX-XXXX” for North American numbers), some people are going to get it wrong. Writing a script to check every character of the entered string to ensure that all the numbers are where they belong, with parentheses and a dash in just the right spots, would be a pretty tedious bit of code to write. And a telephone number is a relatively simple case! What if you had to check that a user had indeed entered an email address or, worse yet, a URL?

Regular expressions provide a quick and easy way of matching a string to a pattern. In our phone number example, we could write a simple regular expression and use it to check – in one quick step – whether or not any given string is a properly formatted phone number. We’ll explore this example a little further, once we’ve taken care of a few technical details.

What do they look like?

Regular expressions can look fairly complex at times, but when it comes right down to it they’re actually just text strings themselves. The following, for example, is a regular expression that searches for the text "JavaScript" (without the quotes):

JavaScript

Not much to it, is there? Any string containing the text “JavaScript” is said to match this regular expression. Thus, this regular expression allows us to detect strings containing this particular string of text.

Well, the bad news is that it’s not always so simple. As I mentioned above, there are special codes that may be used in regular expressions. Some of these can be downright confusing and difficult to remember, so if you intend to make extensive use of them you may wish to find a good reference for yourself. Fortunately, JavaScript supports the very same regular expression syntax as Perl, and there are lots of Websites out there documenting Perl regular expressions. One of the better ones is http://www.delorie.com/gnu/docs/rx/rx_toc.html. There’s also the documentation provided in the official Perl manual at http://www.perl.com/pub/doc/manual/html/pod/perlre.html. Both of these are cryptic in places, so you may want to refer to both of them at once. Let's work our way through a few examples to learn the basic regular expression syntax.