A regular expression consists of two types of characters: literals and metacharacters. A literal is just a character you wish to match in the target (i.e., the text that you are searching within). A metacharacter is a special symbol that acts as a command to the regular expression parser. There are 14 common metacharacters (Table 9.11). To use a metacharacter as a literal, you will need to escape it by prefacing it with a backslash (\). Table 9.12 lists examples of typical metacharacter usage to create patterns; a typical regular expression is made up of several patterns.

In JavaScript, regular expressions are case sensitive and contained within forward slashes. So, for instance, to define a regular expression, you would use the following:

let pattern = /ran/;

Regular expressions can be complicated to visually decode; to help, this section will use the convention of alternating between red and blue to indicate distinct sub-patterns in an expression and black text for literals.

This regular expression will find matches in all three of the following strings:

'randy connolly'
'Sue ran to the store'
'I would like a cranberry'

To perform the pattern check, you would write something similar to the following:

let pattern = /ran/;
let content = 'Sue ran to the store';
if (pattern.test(content))
  console.log("Match found");

Perhaps the best way to understand regular expressions is to work through the creation of one. For instance, if we wished to define a regular expression that would match a North American phone number without the area code, we would need one that matches any string that contains three numbers, followed by a dash, followed by four numbers without any other character. The regular expression for this would be:

^\d{3}–\d{4}$

While this may look quite intimidating at first, it is in reality a fairly straight-forward regular expression. In this example, the dash is a literal character; the rest are all metacharacters. The ^ and $ symbol indicate the beginning and end of the string, respectively; they indicate that the entire string (and not a substring) can only contain that specified by the rest of the metacharacters. The metacharacter \d indicates a digit, while the metacharacters {3} and {4} indicate three and four repetitions of the previous match (i.e., a digit), respectively.

A more sophisticated regular expression for a phone number would not allow the first digit in the phone number to be a zero (“0”) or a one (“1”). The modified regular expression for this would be:

^[2-9]\d{2}–\d{4}$

The [2-9] metacharacter indicates that the first character must be a digit within the range 2 through 9.

We can make our regular expression a bit more flexible by allowing either a single space (440 6061), a period (440.6061), or a dash (440-6061) between the two sets of numbers. We can do this via the [] metacharacter:

^[2-9]\d{2}[–\s\.]\d{4}$

This expression indicates that the fourth character in the input must match one of the three characters contained within the square brackets (– matches a dash, \s matches a white space, and \. matches a period). We must use the escape character for the dash and period, since they have a metacharacter meaning when used within the square brackets.

If we want to allow multiple spaces (but only a single dash or period) in our phone, we can modify the regular expression as follows:

^[2-9]\d{2}[–\s\.]\s*\d{4}$

The metacharacter sequence \s* matches zero or more white spaces. We can further extend the regular expression by adding an area code. This will be a bit more complicated, since we will also allow the area code to be surrounded by brackets (e.g., (403) 440-6061), or separated by spaces (e.g., 403 440 6061), a dash (e.g., 403-440-6061), or a period (e.g., 403.440.6061). The regular expression for this would be:

^\(?\s*\d{3}\s*[\)–\.]?\s*[2-9]\d{2}\s*[–\.]\s*\d{4}$

The modified expression now matches zero or one “(” characters (\(?), followed by zero or more spaces (\s*), followed by three digits (\d{3}), followed by zero or more spaces (\s*), followed by either a “)” a “-”, or a “.” character ([\)-\.]?), finally followed by zero or more spaces (\s*).

Finally, we may want to make the area code optional. To do this, we will group the area code by surrounding the area code subexpression within grouping metacharacters—which are “(” and “)”—and then make the group optional using the ? metacharacter. The resulting regular expression would now be:

^(\(?\s*\d{3}\s*[\)–\.]?\s*)?[2-9]\d{2}\s*[–\.]\s*\d{4}$

While this regular expression does look frightening, when you compare the efficiency of making this check via a single line of code in comparison to the many lines of code via conditionals, you quickly see the benefit of regular expressions. To illustrate, consider the lengthy JavaScript code in Listing 9.13, which validates a phone number using only conditional logic. Needless to say, the regular expression is far more succinct!

const  phone = document.querySelector("#phone").value;
const parts = phone.split(".");   // split on "."
if (parts.length !=3){
   parts = phone.split("-");      // split on "-"
}
if (parts.length == 3) {
   let valid=true; // use a flag to track validity
   for (let i=0; i < parts.length; i++) {
      // check that each component is a number
      if Number.IsInteger(parts[i])) {
         alert( "you have a non-numeric component");
         valid=false;
      }  else { 
         // for some make sure it's in range
         if (i<2) {
            if (parts[i]<100 || parts[i]>999) { 
                valid=false;
            }
          } else {
            if (parts[i]<1000 || parts[i]>9999) { 
                valid=false;
            }
          }
       } // end if isNumeric
    } // end for loop
    if (valid) {
       alert(phone + "is a valid phone number");
    }
} else {
  alert ("not a valid phone number");
}

Hopefully by now you are able to see that many web applications could potentially benefit from regular expressions. Table 9.13 contains several common regular expressions that you might use within a web application. Many more common regular expressions can easily be found on the web.

SELECT * FROM ArtWorks WHERE Title REGEXP '[0-9]+'