Introduction to Regular Expressions in JavaScript

Alex Devero
Apr 6 · 14 min read

In this tutorial, you will learn all you need to get started with regular expressions in JavaScript. You will learn how to create new expressions, how to use them and how to test them. You will also learn how to create simple and complex patterns and about special symbols and characters.

Introduction

He first thing we should clarify is what are Regular expressions. Regular expressions are a way to describe patterns, or rules if you want. You can then use these patterns on strings to check if those strings contain, or match, those patterns. One good thing on Regular expressions is that you can use them in many programming languages.

Regular expressions are not just another part of JavaScript, like some feature or something like that. They are basically a small language, a language that is independent of other languages. Another good thing is that Regular expressions can be incredibly useful. They can help you do incredible things with strings with very little code.

The bad thing is that Regular expressions often look weird, even scary. This is especially true about more complex patterns. This is also one reason many programmers are not really excited to learn about them. That is a mistake. Regular expressions can be really powerful and save you a lot of code. I hope this tutorial will help you overcome this.

How to create Regular expressions

If you want to create regular expression in JavaScript, or describe some pattern, there are two ways to do it.

Regular expression constructor

The first one is by using regular expression constructor. This is a fancy name for a constructor function that exists on RegExp object. This constructor accepts two parameters. The first parameter is the pattern you want to describe. This parameter is not optional. In the end, why create regular expression with any pattern?

The second parameter is a string with flags. Don’t worry, you will learn about flags soon. This parameter is optional. One thing you should remember about flags is that you can’t add them or remove them later, after creating the regular expression. So, if you want to use any flag, make sure to add it when you create the regular expression.

// Regular expression constructor syntax
new RegExp(pattern[, flags])

Regular expression literal

The second way to create regular expression is by using regular expression literal. Just as regular expression constructor, Regular expression literal is also made of two parts. The first one is the pattern you want to describe. This pattern is wrapped with forward slashes (//). The second are flags that follows after the closing slash. Flags are optional.

// Regular expression literal syntax
/pattern/flags

Note: The regular expression literal uses forward slashes enclose the pattern you want to describe. If you want to add one or more forward slashes as a part of the pattern, you have to escape them with a backslash (\), i.e. \/.

Regular expression constructor or literal

The constructor and the literal are similar, but there is one important difference. The regular expression constructor is compiled during runtime. The regular expression literal is compiled when your script is loaded. This means that the literal can’t be changed dynamically, while the constructor can.

So, if you need, or might need, to change the pattern on the fly create regular expressions with constructor, not literal. The same applies if you will create patterns on the fly. In that case, constructor is better choice. On the other hand, if you don’t need to change the pattern, or create it later, use literal.

How to use regular expressions with RegExp methods

Before we get to how to create patterns, let’s quickly discuss how to use these patterns. Thanks to this we will be able to use these methods later to test various ways to how to create patterns.

test()

There are a couple of methods you can use when you work with regular expressions. One of the simplest is test(). You pass the text you want to test as an argument when you use this method. When used, this method returns a Boolean, true if the string contains a match of your pattern or false if it doesn’t.

// test() syntax
// /somePattern/.test('Some text to test')

exec()

Another method you can use is exec(). If there is a match, the exec() method returns an array. This array contains information about the pattern you used, index at which the pattern was found, input, or the text you’ve been testing, and any groups. If there is not a match, exec() method returns null.

One thing to remember. The exec() method will return information only about the first match in the text. When it finds the first match, it stops. Don’t use it if you want to get multiple matches.

// exec() syntax
// /somePattern/.exec('Some text to test')

How to use regular expressions with String methods

The test() and exec() are not the only methods you can use to test for matches of a pattern in a string. There is also search(), match() and matchAll(). These methods are different they don’t exist on RegExp object, but strings. However, they allow you to use regular expressions.

When you want to use these methods, you have to flip the syntax. You call these methods on strings, not patterns. And, instead of passing the string you want to test as an argument, you pass the pattern.

search()

The first one, search(), searches a string and looks for given pattern. When it finds a match, it returns the index at which the :match begins. If it doesn’t find any match, it returns -1. One thing to remember about search(). It will only return the index of the first match in the text. When it finds the first match, it stops.

// search() syntax
// 'Some text to test'.search(/somePattern/)

match()

The match() is a second String method that allows you to use regular expressions. This method works similarly to the exec(). If it finds a match, the match() method returns an array, with information about the pattern you used, index at which the pattern was found, the text and any groups.

Also like exec(), if there is no match, the match() method returns null. When you use match() to search for pattern with g flag, to find all matches, it will return array with all matches.

// match() syntax
// 'Some text to test'.match(/somePattern/)

matchAll()

Similarly to match(), the matchAll() method can also return all matches if you use g flag in the pattern. However, it works differently. The matchAll() method returns an RegExp String Iterator object. When you want to get all matches from this object there are few things you can do.

First, you can use for...of loop to iterate over the object and return or log each match. You can also use Array.from() to create an array from the content of the object. Or, you can use spread operator which will achieve the same result as Array.from().

// match() syntax
// 'Some text to test'.match(/somePattern/)

How to create simple patterns

You know how to create regular expressions and how to test them.Let’s take a look at how to create patterns. The easiest way to create regular expressions is by using simple patterns. This means using a string with some specific text. Then, you can try if some string matches that pattern (text).

// Create simple pattern
// with regular expression literal
const myPattern = /JavaScript/

How to create complex patterns with special symbols and characters

So far, we used regular expressions made of simple patterns. These patterns can be enough for some simple cases. However, these simple patterns are not enough when we deal with more complex cases. This is the time when we have to use create more complex patterns. It is where special symbols and characters come into play. Let’s take at those that are used most often in regular expressions.

Character classes

Character classes are like shortcuts to different types of characters. For example, there is a character classes for letters, digits, space, etc.

/* Character class - Meaning */
. - Matches any character except for newline.
\d - Matches a single digit (same as [0-9]).
\w - Matches a single alphanumeric word character in Latin alphabet, including underscore (same as [A-Za-z0-9_
\s - Matches a single white space character (space, tab, etc.) (same as [\t\r\n\v\f])
\D - Matches a single character that is not a digit (same as [^0-9])
\W - Matches a single character that is not a word character in Latin alphabet (same as [^A-Za-z0-9_])
\S - Matches a single non-white space character (same as [^\t\r\n\v\f]).

Examples:

// . - Matches any character except for newline
const myPattern = /./

Assertions

Another set of special characters are assertions. These symbols allow you to describe patterns such as boundaries, i.e. where words and lines beginning and where they end. Assertions also allow to describe more advanced patterns such as look-ahead, look-behind, and conditional expressions.

/* Assertion - Meaning */
^ - Matches the beginning of the string (regular expression that follows it should be at the start of the test string).
$ - Matches the end of the string (regular expression that follows it should be at the end of the test string).
\b - Matches word boundary. A match at the beginning or ending of a word.
\B - Matches a non-word boundary.
x(?=y) - Lookahead assertion. It matches "x" only if "x" is followed by "y".
x(?!y) - Negative lookahead assertion. It matches "x" only if "x" is not followed by "y".
(?<=y)x - Lookbehind assertion. It matches "x" only if "x" is preceded by "y".
(?<!y)x - Negative lookbehind assertion. It matches "x" only if "x" is not preceded by "y".

Examples:

// ^ - The beginning of the string
const myPattern = /^re/

Quantifiers

When you want to specify numbers of characters or expressions you want to match you can use quantifiers.

/* Quantifier - Meaning */
* - Matches the preceding expression 0 or more times.
+ - Matches the preceding expression 1 or more times.
? - Preceding expression is optional (i.e. matches 0 or 1 times).
x{n} - The "n" must be a positive integer. It matches exactly "n" occurrences of the preceding "x".
x{n, } - The "n" must be a positive integer. It matches at least "n" occurrences of the preceding "x".
x{n, m} - The "n" can be 0 or a positive integer. The "m" is a positive integer. If "m" > "n", it matches at least "n" and at most "m" occurrences of the preceding "x".

Examples:

// * - Matches preceding expression 0 or more times
const myPattern = /bo*k/

Groups and ranges

Groups and ranges are useful when you want to specify groups special characters, or their ranges.

/* Group or range - Meaning */
[abc] - Matches any single character in the string from characters inside the brackets.
[^abc] — Matches anything that is not inside the brackets.
[a-z] - Matches any characters in the rage from "a" to "z".
[^a-z] - Matches any characters that are not in the rage from "a" to "z".
(x) - Matches x and remembers it so we can use it later.
(?<name>x) - Creates a capturing group that can be referenced via the specified name.
(?:x) - Matches "x" but does not remember the match so the match can't be extracted from the resulting array of elements

Examples:

// [abc] - Matches any single character from characters inside the brackets
const myPattern = /[aei]/

Alternations

Alternations allows you to match at least of multiple expressions.

/* Alternation - Meaning */
| - Matches the expression before or after the |. Acts like a boolean OR (||).

Examples:

// | - Matches the expression before or after the |
const myPattern = /(black|white) swan/

Flags

Flags are the last type of symbols you can use in regular expressions. Flags offer a simple way to make your patterns more powerful. For example, flags allow to ignore case of the letters so the pattern can match both upper and lower case, find multiple matches, find matches in multiline text, etc.

/* Flag - Meaning */
g – Search globally, i.e. don't stop after the first match.
i – Ignore case, i.e. match both upper and lower case.
s - When you use it with ., . can match newline characters.
m – Multi-line input, starts with "^", ends with "$", i.e. match the beginning or end of each line.

Examples:

// g flag - Search globally
const myPattern = /xyz/g

Conclusion: Introduction to Regular Expressions in JavaScript

Regular expressions can be difficult to understand and learn. However, they can be very useful tools for solving difficult and complex problems with little code. This makes any struggles worth it. I hope this tutorial helped you understand how regular expressions work and how you can use them.

If you liked this article, please subscribe so you don’t miss any future post.

Originally published at Alex Devero Blog.

A note from JavaScript In Plain English: We are always interested in helping to promote quality content. If you have an article that you would like to submit to JavaScript In Plain English, send us an email at submissions@javascriptinplainenglish.com with your Medium username and we will get you added as a writer.

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store