Regular Expressions With JavaScript

0
17

Introduction

Regular expressions (RegExp) are a very useful and powerful part of JavaScript. The purpose of a RegExp is to determine whether a given string value is valid, based on a set of rules.

Too many tutorials do not actually teach you how to write regular expressions. They simply give you a few examples, most of which are unfortunately very difficult to understand, and then never explain the details of how the RegExp works. If you’ve been frustrated by this as well, then you’ve come to the right place! Today, you’re going to actually learn how to write regular expressions.

To learn how they work, we’re going to start with a very simple example and then continually add to the rules of the RegExp. With each rule that we add, I will explain the new rule and what it adds to the RegExp.

A RegExp is simply a set of rules to determine whether a string is valid. Let’s assume that we have a web page where our customers enter their date of birth. We can use a regular expression in JavaScript to validate whether the date that they enter is in a valid date format. After all, we do not want them to enter something that is not a date.

Substring Search

To begin with, let’s write a RegExp that requires our users to enter a date that contains this value: “MAR-16-1981”. Notice that they can enter anything they want, as long as the value contains MAR-16-1981 somewhere in the value. For example, this would even be valid with this expression: TEST-MAR-16-1981-EXTRA.

Below is the HTML and JavaScript for a web page with a form that allows our customers to enter their date of birth.

Take note of the following key pieces of this code:

1. When the submit button is clicked, our JavaScript function is called. If the value fails our test, we display an alert pop-up box with an error message. In this scenario, the function also returns a false value. This ensures that the form does not get submitted.

2. Notice that we’re using the RegExp JavaScript object. This object provides us with a “test” method to determine if the value passes our regular expression rules.

Exact Match Search

The RegExp above allows any value that contains MAR-16-1981. Next, let’s expand on our regular expression to only allow values that equal MAR-16-1981 exactly. There are two things we need to add to our regular expression. The first is a caret ^ at the beginning of the regular expression. The second is a dollar sign $ at the end of the expression. The caret ^ requires that the value we’re testing can not have any characters preceding the MAR-16-1981 value. The dollar sign $ requires that the value can not have any trailing characters after the MAR-16-1981 value. Here’s how our regular expression looks with these new rules. This ensures that the value entered must be exactly MAR-16-1981.

/ ^ MAR-$ 16-1981 /

Character Matching

We’ve already learned how to validate string values that either contain a certain substring or are equal to a certain value with a regular expression. However, for our HTML form, we probably do not want to require our customers to enter an exact date. It’s more likely that we want them to enter any date, as long as it meets certain format restrictions. To start with, let’s look at modifying the RegExp so that any three letters can be entered (not just “MAR”). Let’s also require that these letters be entered in uppercase. Here’s how this rule looks when added to our regular expression.

/ ^ [AZ] {3} $ -16-1981 /

All we’ve done is replaced “MAR” with [AZ] {3} which says that any letter between A and Z can be entered 3 times. Let’s look at a few variations of the character matching rules to learn about some other ways that we can match patterns of characters.

The rule above only allows 3 uppercase characters. What if you wanted to allow 3 characters that could be uppercase or lowercase (ie case-insensitive)? Here’s how that rule would look in a regular expression.

/ ^ [A-Za-z] {3} $ -16-1981 /

Next, let’s modify our rule to allow 3 or more characters. The {3} quantifier says that exactly 3 characters must be entered for the month. We can allow 3 or more characters by changing this quantifier to {3,}.

/ ^ [A-Za-z] {3,} – $ 16-1981 /

If we want to allow one or more characters, we can simply use the plus-sign + quantifier.

/ ^ [A-Za-z] + – 16-1981 $ /

Ranges

Until now, we’ve specified ranges of letters [AZ] and numbers [0-9]. There are a variety of methods for writing ranges within regular expressions. You can specify a range of [abc] to match a or b or c. You can also specify a range of [^ abc] to match anything that is not an a or b or c.

 

Leave a Reply