JavaScript Regular Expressions

In this tutorial you will learn how regular expressions work, as well as how to use them to perform pattern matching in an efficient way in JavaScript.

What is Regular Expression

Regular Expressions, commonly known as "regex" or "RegExp", are a specially formatted text strings used to find patterns in text. Regular expressions are one of the most powerful tools available today for effective and efficient text processing and manipulations. For example, it can be used to verify whether the format of data i.e. name, email, phone number, etc. entered by the user is correct or not, find or replace matching string within text content, and so on.

JavaScript supports Perl style regular expressions. Why Perl style regular expressions? Because Perl (Practical Extraction and Report Language) was the first mainstream programming language that provided integrated support for regular expressions and it is well known for its strong support of regular expressions and its extraordinary text processing and manipulation capabilities.

Let's begin with a brief overview of the commonly used JavaScript's built-in methods for performing pattern-matching before delving deep into the world of regular expressions.

Defining Regular Expressions

In JavaScript, regular expressions are represented by RegExp object, which is a native JavaScript object like String, Array, and so on. There are two ways of creating a new RegExp object — one is using the literal syntax, and the other is using the RegExp() constructor.

The literal syntax uses forward slashes (/pattern/) to wrap the regular expression pattern, whereas the constructor syntax uses quotes ("pattern"). The following example demonstrates both ways of creating a regular expression that matches any string that begins with "Mr.".

// Literal syntax 
let regex = /^Mr\./;

// Constructor syntax
let regex = new RegExp("^Mr\\.");

As you can see, the regular expression literal syntax is shorter and easier to read. Therefore it is preferable to use the literal syntax. We'll also use it throughout this tutorial.

Pattern Matching with Regular Expression

Regular expression patterns include the use of letters, digits, punctuation marks, etc., plus a set of special regular expression characters (do not confuse with the HTML special characters).

The characters that are given special meaning within a regular expression, are:
. * ? + [ ] ( ) { } ^ $ | \. You will need to backslash these characters whenever you want to use them literally. For example, if you want to match ".", you'd have to write \.. All other characters automatically assume their literal meanings.

The following sections describe the various options available for formulating patterns:

Character Classes

Square brackets surrounding a pattern of characters are called a character class e.g. [abc]. A character class always matches a single character out of a list of specified characters that means the expression [abc] matches only a, b or c character.

Negated character classes can also be defined that match any character except those contained within the brackets. A negated character class is defined by placing a caret (^) symbol immediately after the opening bracket, like [^abc], which matches any character except a, b, and c.

You can also define a range of characters by using the hyphen (-) character inside a character class, like [0-9]. Let's look at some examples of the character classes:

The following example will show you how to find whether a pattern exists within a string or not using the regular expression with the JavaScript test() method:

let regex = /ca[kf]e/;
let str = "He was eating cake in the cafe.";

// Test the string against the regular expression
if(regex.test(str)) {
    alert("Match found!");
} else {
    alert("Match not found.");
}

Further, you can add the global flag g to a regular expression to find all matches in a string:

let regex = /ca[kf]e/g;
let str = "He was eating cake in the cafe.";
let matches = str.match(regex);
alert(matches.length); // Outputs: 2

Predefined Character Classes

Some character classes such as digits, letters, and whitespaces are used so frequently that there are shortcut names for them. The following table lists those predefined character classes:

The following example will show you how to find and replace space with a hyphen character in a string using regular expression with the JavaScript replace() method:

let regex = /\s/g;
let replacement = "-";
let str = "Earth revolves around\nthe\tSun";

// Replace spaces, newlines and tabs
document.write(str.replace(regex, replacement) + "<hr>");

// Replace only spaces
document.write(str.replace(/ /g, "-"));

Repetition Quantifiers

In the previous section we've learnt how to match a single character in a variety of fashions. But what if you want to match on more than one character? For example, let's say you want to find out words containing one or more instances of the letter p, or words containing at least two p's, and so on.

This is where quantifiers come into play. With quantifiers you can specify how many times a character in a regular expression should match. Quantifiers can be applied to the individual characters, as well as classes of characters, and groups of characters contained by the parentheses.

The following table lists the various ways to quantify a particular pattern:

The regular expression in the following example will splits the string at comma, sequence of commas, whitespace, or combination thereof using the JavaScript split() method:

let regex = /[\s,]+/;
let str = "My favourite colors are red, green and blue";
let parts = str.split(regex);

// Loop through parts array and display substrings
for(let part of parts){
    document.write("<p>" + part + "</p>");
}

Position Anchors

There are certain situations where you want to match at the beginning or end of a line, word, or string. To do this you can use anchors. Two common anchors are caret (^) which represent the start of the string, and the dollar ($) sign which represent the end of the string.

The regular expression in the following example will match only those names in the names array which start with the letter "J" using the JavaScript test() function:

let regex = /^J/;
let names = ["James Bond", "Clark Kent", "John Rambo"];

// Loop through names array and display matched names
for(let name of names) {
    if(regex.test(name)) {
        document.write("<p>" + name + "</p>")
    }
}

Pattern Modifiers (Flags)

A pattern modifier allows you to control the way a pattern match is handled. Pattern modifiers are placed directly after the regular expression, for example, if you want to search for a pattern in a case-insensitive manner, you can use the i modifier, like this: /pattern/i.

The following table lists some of the most commonly used pattern modifiers.

The following example will show you how to use the g and i modifiers in a regular expression to perform a global and case-insensitive search with the JavaScript match() method.

let regex = /color/gi;
let str = "Color red is more visible than color blue in daylight.";
let matches = str.match(regex); // global, case-insensitive match
console.log(matches);
// expected output: ["Color", "color"]

Similarly, the following example shows how to match at the beginning of every line in a multi-line string using the ^ anchor and m modifier with the JavaScript match() method.

let regex = /^color/gim;
let str = "Color red is more visible than \ncolor blue in daylight.";
let matches = str.match(regex); // global, case-insensitive, multiline match
console.log(matches);
// expected output: ["Color", "color"]

Alternation

Alternation allows you to specify alternative version of a pattern. Alternation in a regular expression works just like the OR operator in an if-else conditional statement.

You can specify alternation using a vertical bar (|). For example, the regexp /fox|dog|cat/ matches the string "fox", or the string "dog", or the string "cat". Here's an example:

let regex = /fox|dog|cat/;
let str = "The quick brown fox jumps over the lazy dog.";
let matches = str.match(regex);
console.log(matches);
// expected output: ["fox", index: 16, ...]

Grouping

Regular expressions use parentheses to group subexpressions, just like mathematical expressions. Parentheses allow a repetition quantifier to be applied to an entire subexpression.

For example, in regexp /go+/ the quantifier + is applied only to the last character o and it matches the strings "go", "goo", and so on. Whereas, in regexp /(go)+/ the quantifier + is applied to the group of characters g and o and it matches the strings "go", "gogo", and so on.

let regex = /(go)+/i; 
let str = "One day Gogo will go to school.";
let matches = str.match(regex); // case-insensitive match
console.log(matches);
// expected output: ["Gogo", "go", index: 8, ...]

Word Boundaries

A word boundary character ( \b) helps you search for the words that begins and/or ends with a pattern. For example, the regexp /\bcar/ matches the words beginning with the pattern car, and would match cart, carrot, or cartoon, but would not match oscar.

Similarly, the regexp /car\b/ matches the words ending with the pattern car, and would match oscar or supercar, but would not match cart. Likewise, the /\bcar\b/ matches the words beginning and ending with the pattern car, and would match only the word car.

The following example will highlight the words beginning with car in bold:

let regex = /(\bcar\w*)/g;
let str = "Words begining with car: cart, carrot, cartoon. Words ending with car: oscar, supercar.";
let replacement = '<b>$1</b>';
let result = str.replace(regex, replacement);
document.write(result);