How To Create A Regex In Javascript

Practical Guide to Regex API in JavaScript

RegExp, replaceAll, replace, exec, search, test, and more

Regular expressions are strings of text containing patterns to help you match, locate, and manage text. There are so useful that almost every language ships with some kind of regex support.

Although Perl and Python are the fully-featured languages when it comes to regex, JavaScript has plenty of tools.

Do you know the full capabilities of JavaScript? Do you want to know the differences between each of the tools?

In this article, we won't be di g ging into the syntax of regex but which tools can you use in JavaScript to make the most out of them. Regular expressions can be a bit overwhelming at first. We will see how to create and use those in an efficient way.

Creating Regex Expressions

The first step toward mastering regular expression is to be able to create those regex expressions. When it comes to creating regex express, you have two choices:

1. Using regular expression literals

When we know our expression is not going to run at runtime we can create them using regular expression literals. The syntax is simple; the regular expression is enclosed between slashes. The flags, if any, are appended at the end.

                      /pattern/flags

Let's see an example:

This is known as literal notation. The regular expression will be parsed and computed at compilation time. That means it will be a very performant solution.

2. Using the regular constructor

When your regex is set to change at runtime or rely on a runtime variable we can use the RegExp API. The first argument is the expression. There is an optional second parameter to set the flags.

                      new RegExp(pattern              [, flags])                                // factory notation without the new keywod is possible
            RegExp(pattern              [, flags])

Let's see an example:

The compilation of the expression will happen at runtime here; it will be slower at execution time.

Another drawback of using the RegExp constructor is that special characters need to be escaped. For example, we would need to \\s instead of \s. Please check here for reference to what needs to be escaped.

Example of declaring the same regex using two flavors:

The method of creation of the regex expression doesn't have any effect on its capabilities or usages. Any regex will always end up having the same prototype: RegExp.prototype.

Supported flags in JavaScript

We talked before about regex and flags. Flags are optional and must be written in lowercase; otherwise, they will be invalid.

Let's check the different flags accepted by the JavaScript engine:

i: makes the search case-insensitive
g: looks for all matches instead of returning the first one.
m: multiline mode.
s: enables "dotall" mode. It allows the . to match newline character \n
u: enables full Unicode support.
y: enables sticky mode: the expression will start searching from its indicated lastIndex property.

JavaScript Methods

Now that we know how to create regular expressions, let's check what we can do with those. There are eight methods that accept regex:

Two from the RegexExp.prototype.
Six from the String.prototype.

Let's see them in detail:

1. test()

use with a regex only

There test() method is useful is we are only concern about knowing if a given target matches our criteria. It will just return true or false.

As discussed previously, the above code is the same as doing:

2. exec()

use with a regex only

The exec() method is used to iterate over the search results by doing multiple invokes. If the return is null it means you reach the end. If not null you will get the latIndex position and the result matched. It does support grouping.

3. match()

use with a regex only

The match() method returns an array with all the matching occurrences instead of one at a time like exec. No additional info about the match will be returned. If not used with the g flag it does return capturing groups.

4. matchAll()

use with a regex only

The matchAll() method is similar to exec although it will give us an iterator as a result instead. Then we can loop through all the results using the for loop. It does return capturing groups.

5. search()

use with a regex only

The search() method is useful when you are looking to locate the position of a match in a string. It is similar to the indexOf method but using regex instead of plain strings. It will return -1 if the index is not found or the match starting position.

6. replace()

use with a regex or a string

The replace() method returns a new string with some or all the matches replaced by the defined replacement. It is intended for strings or regex literals. When used with the former only the first occurrence will be replaced.

7. replaceAll()

use with a regex or a string

The replaceAll() method is similar to replace(). There are two key differences:

when using a string it will replace all occurrences.
it will require the regex to have the g argument or will fail otherwise.

Note that the replaceAll method was just added to the latest ES2021 specs.

8. split()

use with a regex or a string

The split() method divides the string using the searching pattern. It will return an ordered array of substrings. The division can be done using a string or a regex.

The methods match(), matchAll(), and search() do accept regex and strings as arguments. However, if non a regex is given the string will be converted to RegExp using new RegExp(argument).

To prevent that, if available, like search(), it is better to their string counterparts implementation when using strings.

ECMAScript Features

Named capture groups

Capture groups are a useful regex feature. On the ES2018 spec, the capture named groups feature was introduced. It allows group names to have more consistent access.

RegExp Lookbehind Assertions

Lookahead is already present in all major browsers. Lookbehind was released as part of the ES2018 specs. It allows us to base our regex expressions on what is behind the match. It works in the opposite direction of lookahead. It can accept positive and negative conditions.

RegExp unicode property escapes

Prior to this, there currently is no way to access the Unicode characters for regex using the native JavaScript engine. It was released as part of the ES2018 spec.

RegExp match indices

This is yet not released and will be shipped with the ES2022 spec. By using the newly added flag d we can have access to the start and end index positions of the match.

It works even with capture groups and named groups.