Using Regular Expressions in Javascript

If you need a refresher on how Regular Expressions work, check out our Interactive Tutorial first!

Javascript supports regular expressions through the standard class RegExp which is implemented natively in every modern browser. While the common implementation isn't completely PCRE compatible, it supports the majority of use cases for regular expressions that you might require.

Literal Javascript strings

Writing regular expressions in Javascript requires instantiating a new RegExp object with a pattern to match against other strings. This object can be done using its normal Javascript constructor, or by using the literal notation shorthand which has an added benefit of not having to additionally escape backslashes and other special metacharacters often used in regular expression patterns.

For example, the following two statements are equivalent:

    // Literal notation to match a string of alpha-numeric characters
var re = /\w+\d+/;
// Constructor notation of the same regular expression object
var re = new RegExp("\\w+\\d+");

The literal shorthand is convenient and makes the regular expressions easier to read, so for the rest of the examples below, we will be using that format.

Matching a string

The RegExp object has a number of top level methods, and to test whether a regular expression matches a specific string in Javascript, you can use RegExp.test(). To actually extract information from a string using a regular expression, you can instead use the RegExp.exec() call which provides more information about the match in its result.

Methods

    boolean = /regular expression/.test(inputStr)

    matches = /regular expression/.exec(inputStr)

Example

    // Lets use a regular expression to match a date string.
var re = /([a-zA-Z]+) (\d+)/;
if (re.test("June 24")) {
    // Indeed, the expression "([a-zA-Z]+) (\d+)" matches the date string

    // If we want, we can instead search the string to find where the pattern 
    // matches in the input string, and also get all the matches and captured 
    // groups.
    var matches = re.exec("June 24");

    // This will print [0, 7), since it matches at the beginning and end of the 
    // string
    var matchStart = matches.index;
    var matchEnd = matchStart + matches[0].length;
    console.log("Match at index " + matchStart + ", " + matchEnd);

    // The results contain the matched values.  In particular:
    //    matches[0] always returns the fully matched string
    //    matches[1], matches[2], ... will return the capture
    //            groups in order from left to right in the input string

    // So this will print "June 24"
    console.log("Full match: " + matches[0]);
    // So this will print "June"
    console.log("Month: " + matches[1]);
    // So this will print "24"
    console.log("Day: " + matches[2]);
} else {
    // If the pattern does not match
    console.log("The regex pattern does not match. :(");
}

`RegExp` Flags

When creating a new regular expression object, you can also specify additional flags to control how the pattern will be used when matching against other strings. In particular they can be a combination of the following flags, some of which are for convenience (and can also be expressed by changing the pattern), and some of which are useful with complex strings.

The flags are either appended after the regular expression in the literal notation, or passed into the constructor in the normal notation.

g - allows you to run RegExp.exec() multiple times to find every match in the input string until the method returns null.
i - makes the pattern case insensitive so that it matches strings of different capitalizations
m - is necessary if your input string has newline characters (\n), this flag allows the start and end metacharacter (^ and $ respectively) to match at the beginning and end of each line instead of at the beginning and end of the whole input string
u - interpret the regular expression as unicode codepoints

Example

    // Find all matches (global matching) and using case insensitive matching
var re = /regular expression/gi;
// Constructor notation of the same regular expression object with the two flags
var re = new RegExp("regular expression", "gi");

String functions

There are also string functions to match, search, and even replace substrings based on a given regular expression, which can be useful and easy to use. Note however that with these calls, the flags may work slightly differently with these calls, and they can be slower since a new regular expression has to be compiled with each call (instead of creating a single regular expression object and testing multiple strings).

Methods

    matches = inputStr.match(/regular expression/flags)

    index = inputStr.search(/regular expression/flags)

    replacedStr = inputStr.replace(/regular expression/flags, searchStr)

Example

    // Lets try and perform a case-insensitive match on all
// the dates in a string.
var inputStr = "June 24";
var matches = inputStr.match(/(\w+) (\d+)/i);
// So this will print "June 24"
console.log("Full match: " + matches[0]);
// This will print [0, 7), since it matches at the beginning and end of the 
// string
var matchStart = matches.index;
var matchEnd = matchStart + matches[0].length;
console.log("Match at index " + matchStart + ", " + matchEnd);

// With String.match() there is a caveat where if a global match flag is set,
// then only the results (without capture groups) are returned and not match
// objects.  For example, the following will print "June 24", "Aug 13", and
// "Nov 5", but it will not provide the index of each match.
var inputStr = "June 24, Aug 13, Nov 5";
var matches = inputStr.match(/(\w+) (\d+)/g);
for (var i = 0; i < matches.length; i++) {
    console.log(matches[i]);
}

// We can use String.search() to find the index of a particular pattern in
// an input string though.
var inputStr = "There are 15 cats on the bed";
// This will print 10, the index at which we find the digits
console.log(inputStr.search(/\d+/));
// If there is no such match, it returns -1
console.log(inputStr.search(/123/));

// Lets try and replace some date strings
var inputStr = "June 24, August 9, Dec 12";
// This will print "June 1, August 1, Dec 1" since the global flag is set.
// and the match applies to all the dates
console.log(inputStr.replace(/\d+/g, "1"));

// Lets try and reverse the order of the day and month in a date 
// string. Notice how the replacement string has back references to the 
// captured groups.
var inputStr = "June 24, August 9, Dec 12";
// This will reorder the string and print:
//   24 of June, 9 of August, 12 of Dec
console.log(inputStr.replace(/(\w+) (\d+)/g, "$2 of $1"));

Links

For more information about using regular expressions in Javascript, please visit the following links:

Mozilla Javascript Regular Expression Guide

Lesson Notes

	abc…	Letters
	123…	Digits
	\d	Any Digit
	\D	Any Non-digit character
	.	Any Character
	\.	Period
	[abc]	Only a, b, or c
	[^abc]	Not a, b, nor c
	[a-z]	Characters a to z
	[0-9]	Numbers 0 to 9
	\w	Any Alphanumeric character
	\W	Any Non-alphanumeric character
	{m}	m Repetitions
	{m,n}	m to n Repetitions
	*	Zero or more repetitions
	+	One or more repetitions
	?	Optional character
	\s	Any Whitespace
	\S	Any Non-whitespace character
	^…$	Starts and ends
	(…)	Capture Group
	(a(bc))	Capture Sub-group
	(.*)	Capture all
	(abc\|def)	Matches abc or def

Literal Javascript strings

Matching a string

RegExp Flags

String functions

Links

`RegExp` Flags