A Guide to Regular Expressions (Regex) in JavaScript

When you first encounter regular expressions, they may seem like a random string of gibberish. While they might look awkward and have a somewhat confusing syntax, they are also extremely useful. 

The truth is, properly understanding regular expressions will make you a much more effective programmer. In order to fully understand the regex world, you first need to learn the basic concepts on which you can later build. Let’s get started.

 

What are Regular Expressions?

Regular expressions are a way to describe patterns in a string of data. They form a small language of their own, which is a part of many programming languages like JavaScript, Perl, Python, PHP and Java.

Regular expressions allow you to check a string of characters like an e-mail address or password for patterns to see if they match the pattern defined by that regular expression and produce actionable information.

More on JavaScript: 5 Ways to Check Data Types in JavaScript Using Typeof

 

How to Create a Regular Expression in JavaScript

There are two ways to create a regular expression in JavaScript. It can either be created with a RegExp constructor, or by using forward slashes ( / ) to enclose the pattern.

 

Regular Expression Constructor

Syntax: new RegExp(pattern[, flags])

Example 

var regexConst = new RegExp('abc');

 

Regular Expression (Regex) Literal

Syntax: /pattern/flags

Regex Literal Example 

var regexLiteral = /abc/;

Here, the flags are optional. I will explain these later in this article.

There might also be cases where you want to create regular expressions dynamically, in which case, regex literal won’t work. So, you have to use a regular expression constructor.

No matter which method you choose, the result is going to be a regex object. Both regex objects will have the same methods and properties attached to them.

Since forward slashes are used to enclose patterns in the above example, you have to escape the forward slash ( / ) with a backslash ( \ ) if you want to use it as a part of the regex.

 

JavaScript Regular Expression (Regex) Methods

There are two main methods for testing regular expressions.

 

RegExp.prototype.test()

This method is used to test whether a match has been found or not. It accepts a string which we have to test against a regular expression, and it returns true or false depending upon if the match is found or not.

For example:

var regex = /hello/;
var str = 'hello world';
var result = regex.test(str);
console.log(result);
// returns true

 

RegExp.prototype.exec()

This method returns an array containing all the matched groups. It accepts a string that we have to test against a regular expression.

For example:

var regex = /hello/;
var str = 'hello world';
var result = regex.exec(str);
console.log(result);
// returns [ 'hello', index: 0, input: 'hello world', groups: undefined ]
// 'hello' -> is the matched pattern.
// index: -> Is where the regular expression starts.
// input: -> Is the actual string passed.

We are going to use the test() method in this article.

 

Simple JavaScript Regex Patterns

This is the most basic pattern, which simply matches the literal text with the test string. For example:

var regex = /hello/;
console.log(regex.test('hello world'));
// true

 

Special Characters to Know for JavaScript Regular Expressions (Regex)

Up until now, we’ve created simple regular expression patterns. Now, let’s tap into the full power of regular expressions when handling more complex cases.

For example, instead of matching a specific email address, let’s say we’d like to match a number of email addresses. That’s where special characters come into play. There are special symbols and characters that you have to memorize in order to fully understand the regular expressions.

 

Flags

Regular expressions have five optional flags or modifiers. Let’s discuss the two most important flags:

• g: Global search, don’t return after the first match.
• i: Case-insensitive search

You can also combine the flags in a single regular expression. Their order doesn’t have any effect on the result.

Let’s look at some code examples:

 

Regular Expression Literal

Syntax: /pattern/flags

var regexGlobal = /abc/g;
console.log(regexGlobal.test('abc abc'));
// it will match all the occurence of 'abc', so it won't return 
// after first match.
var regexInsensitive = /abc/i;
console.log(regexInsensitive.test('Abc'));
// returns true, because the case of string characters don't matter 
// in case-insensitive search.

 

Regular Expression Constructor 

Syntax: new RegExp('pattern', 'flags')

var regexGlobal = new RegExp('abc','g')
console.log(regexGlobal.test('abc abc'));
// it will match all the occurence of 'abc', so it won't return // after first match.
var regexInsensitive = new RegExp('abc','i')
console.log(regexInsensitive.test('Abc'));
// returns true, because the case of string characters don't matter // in case-insensitive search.

 

Character Groups

Below are some common regular expression character groups to know.

 

Character Set [xyz] 

A character set is a way to match different characters in a single position, it matches any single character in the string from characters present inside the brackets. For example:

var regex = /[bt]ear/;
console.log(regex.test('tear'));
// returns true
console.log(regex.test('bear'));
// return true
console.log(regex.test('fear'));
// return false

All the special characters except for caret (^), which has an entirely different meaning inside the character set, lose their special meaning inside the character set.

 

Negated Character Set [^xyz] 

This matches anything that is not enclosed in the brackets. For example:

var regex = /[^bt]ear/;
console.log(regex.test('tear'));
// returns false
console.log(regex.test('bear'));
// return false
console.log(regex.test('fear'));
// return true

 

Ranges [a-z]

If we want to match all of the letters of an alphabet in a single position, we could write all the letters inside the brackets. But there is an easier way, and that is ranges. For example, [a-h] will match all the letters from a to h. Ranges can also be digits like [0-9] or capital letters like [A-Z].

var regex = /[a-z]ear/;
console.log(regex.test('fear'));
// returns true
console.log(regex.test('tear'));
// returns true

 

Meta-Characters 

Meta-characters are characters with a special meaning. There are many meta characters, but I am going to cover the most important ones here.

• \d: Match any digit character (same as [0-9] ).
• \w: Match any word character. A word character is any letter, digit and underscore. This is the ame as [a-zA-Z0–9_] , i.e alphanumeric characters.
• \s: Match a whitespace character (spaces, tabs etc).
• \t: Match a tab character only.
• \b: Find a match at the beginning or ending of a word. Also known as a word boundary.
• . (period): Matches any character except for newline.
• \D: Match any non-digit character. This is the same as [^0–9].
• \W: Match any non-word character. This is the same as [^a-zA-Z0–9_].
• \S: Match a non-whitespace character.

 

Quantifiers

Quantifiers are symbols that have a special meaning in a regular expression.

• +: Matches the preceding expression one or more times.

var regex = /\d+/;
console.log(regex.test('8'));
// true
console.log(regex.test('88899'));
// true
console.log(regex.test('8888845'));
// true

• *: Matches the preceding expression zero or more times.

var regex = /go*d/;
console.log(regex.test('gd'));
// true
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// true

• ?: Matches the preceding expression zero or one time, that is the preceding pattern is optional.

var regex = /goo?d/;
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// false

• ^: Matches the beginning of the string, the regular expression that follows it should be at the start of the test string, i.e the caret (^) matches the start of the string.

var regex = /^g/;
console.log(regex.test('good'));
// true
console.log(regex.test('bad'));
// false
console.log(regex.test('tag'));
// false

• $: Matches the end of the string. That is, the regular expression that precedes it should be at the end of the test string. The dollar ($) sign matches the end of the string.

var regex = /.com$/;
console.log(regex.test('[email protected]'));
// true
console.log(regex.test('test@testmail'));
// false

• {N}: Matches exactly N occurrences of the preceding regular expression.

var regex = /go{2}d/;
console.log(regex.test('good'));
// true
console.log(regex.test('god'));
// false

• {N,}: Matches at least N occurrences of the preceding regular expression.

var regex = /go{2,}d/;
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// true
console.log(regex.test('gooood'));
// true

• {N,M}: Matches at least N occurrences and at most M occurrences of the preceding regular expression,where M > N.

var regex = /go{1,2}d/;
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// false

• Alternation X|Y: Matches either X or Y. For example:

var regex = /(green|red) apple/;
console.log(regex.test('green apple'));
// true
console.log(regex.test('red apple'));
// true
console.log(regex.test('blue apple'));
// false

If you want to use any special character as a part of the expression, say for example you want to match literal + or ., then you have to escape them with backslash ( \ ).

For example:

var regex = /a+b/;  // This won't work
var regex = /a\+b/; // This will work
console.log(regex.test('a+b')); // true

 

Advanced Characters

(X): Matches x and remembers the match. These are called capturing groups. This is also used to create sub expressions within a regular expression. For example :

var regex = /(foo)bar\1/;
console.log(regex.test('foobarfoo'));
// true
console.log(regex.test('foobar'));
// false

\1 remembers and uses that match from the first sub-expression within parentheses.

(?:x): Matches x and does not remember the match. These are called non capturing groups. Here \1 won’t work, it will match the literal \1.

var regex = /(?:foo)bar\1/;
console.log(regex.test('foobarfoo'));
// false
console.log(regex.test('foobar'));
// false
console.log(regex.test('foobar\1'));
// true

x(?=y): Matches x only if x is followed by y. Also called positive look ahead. For example:

var regex = /Red(?=Apple)/;
console.log(regex.test('RedApple'));
// true

In the above example, a match will occur only if Red is followed by Apple.

 

Practicing JavaScript Regular Expressions (Regex)

Let’s practice some of the concepts that we have learned above.

For the first problem, let’s match any 10 digit number:

var regex = /^\d{10}$/;
console.log(regex.test('9995484545'));
// true

Let’s break that down and see what’s going on.

1. If we want to enforce that the match must span the whole string, we can add the quantifiers ^ and $. The caret ^ matches the start of the input string, whereas the dollar sign $ matches the end. So, it would not match if the string contained more than 10 digits.
2. \d matches any digit character.
3. {10} matches the previous expression. In this case, \d exactly 10 times. So, if the test string contains less than or more than 10 digits, the result will be false.

Now, let’s match a date with following format DD-MM-YYYYor DD-MM-YY

var regex = /^(\d{1,2}-){2}\d{2}(\d{2})?$/;
console.log(regex.test('01-01-1990'));
// true
console.log(regex.test('01-01-90'));
// true
console.log(regex.test('01-01-190'));
// false

Let’s break that down and see what’s going on.

1. Again, we have wrapped the entire regular expression inside ^and $, so that the match spans the entire string.
2. ( start of first subexpression.
3. \d{1,2} matches at least one digit and at most two digits.
4. - matches the literal hyphen character.
5. ) end of first subexpression.
6. {2} matches the first subexpression exactly two times.
7. \d{2} matches exactly two digits.
8. (\d{2})? matches exactly two digits. But it’s optional, so either year contains two digits or four digits.

For our third challenge, let’s match anything but a new line.

The expression should match any string with a format like abc.def.ghi.jkl, where each variable a, b, c, d, e, f, g, h, i, j, k, l can be any character except a new line.

var regex = /^(.{3}\.){3}.{3}$/;
console.log(regex.test('123.456.abc.def'));
// true
console.log(regex.test('1243.446.abc.def'));
// false
console.log(regex.test('abc.def.ghi.jkl'));
// true

Let’s break that down and see what’s going on up there.

1. We have wrapped up the entire regular expression inside ^and $, so that the match spans the entire string.
2. ( start of first sub expression.
3. .{3} matches any character except new line for exactly three times.
4. \. matches the literal . period.
5. ) end of first sub expression.
6. {3} matches the first sub expression exactly three times.
7. .{3} matches any character except the new line for exactly three times.

More on JavaScript: What Are JavaScript Algorithms and Data Structures?

 

Understanding JavaScript Regular Expressions (Regex)

Regular expressions can be fairly complex at times, but having a proper understanding of the above concepts will help you understand more complex regex patterns easily.

 

Frequently Asked Questions