Regular Expression ( RegExp() ) in JavaScript

Updated: Feb 21

A regular expression is a string that describes a pattern e.g., email addresses and phone numbers.

In JavaScript, regular expressions are objects. JavaScript provides the built-in RegExp type that allows you to work with regular expressions effectively.

Regular expressions are useful for searching and replacing strings that match a pattern. They have many useful applications.

For example, you can use regular expressions to extract useful information in web scraping like product prices. Or you can use regular expressions to validate form fields like email addresses and phone numbers.

The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.

Also Read: C# Regex: A Complete Guide

Tips:

Use / / or RegExp constructor to create a regular expression.
Use the pattern flag e.g., ignore (i) and global (g) to modify the matching behavior.
Use the RegExp.test() method to determine if a pattern is found in a string.
Use the RegExp.exec() method to find the match and return an array that contains the information of the match.
Some string methods such as match() and replace() support the regular expressions.

Syntax

A regular expression could be defined with the RegExp () constructor, as follows −

var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;

Here is the description of the parameters −

pattern − A string that specifies the pattern of the regular expression or another regular expression.
attributes − An optional string containing any of the "g", "i", and "m" attributes that specify global, case-insensitive, and multi-line matches, respectively.

How to Create RegExp()

There are two ways you can create a regular expression in JavaScript.

Using a regular expression literal: The regular expression consists of a pattern enclosed between slashes /. For example,

cost regularExp = /abc/;

Here, /abc/ is a regular expression.

Using the RegExp() constructor function: You can also create a regular expression by calling the RegExp() constructor function. For example,

const reguarExp = new RegExp('abc');

For example,

const regex = new RegExp(/^a...s$/);
 console.log(regex.test('alias')); // true

In the above example, the string alias matches with the RegEx pattern /^a...s$/. Here, the test() method is used to check if the string matches the pattern.

Example 1:

Modifier -

g - Performs a global matchthat is, find all matches rather than stopping after the first match.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript RegExp()</h2>

<p>Global search for "Platform" in a string:</p>

<p id="demo"></p>

<script>
let text = "This is your own Platform : The Tech Platform?";
let pattern = /Platform/g; 
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Output:

Example 2:

Modifier:

i - Perform case-insensitive matching.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript RegExp()</h2>

<p>case-insensitive search for "The Tech Platform"</p>

<p id="demo"></p>

<script>
let text = "TheTechPlatform";
let pattern = /TheTechPlatform/i;
let result = text.match(pattern);

document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Output:

Specific Patterns Used in RegExp()

Brackets

Brackets ([]) have a special meaning when used in the context of regular expressions. They are used to find a range of characters.

[...] - Any one character between the brackets.
[^...] - Any one character not between the brackets.
[0-9] - It matches any decimal digit from 0 through 9.
[a-z] - It matches any character from lowercase a through lowercase z.
[A-Z] - It matches any character from uppercase A through uppercase Z.
[a-Z] - It matches any character from lowercase a through uppercase Z.

The ranges shown above are general; you could also use the range [0-3] to match any decimal digit ranging from 0 through 3, or the range [b-v] to match any lowercase character ranging from b through v.

Quantifiers

The frequency or position of bracketed character sequences and single characters can be denoted by a special character. Each special character has a specific connotation. The +, *, ?, and $ flags all follow a character sequence.

p+ - It matches any string containing one or more p's.
p* - It matches any string containing zero or more p's.
p? - It matches any string containing at most one p.
p{N} - It matches any string containing a sequence of N p's
p{2,3} - It matches any string containing a sequence of two or three p's.
p{2, } -It matches any string containing a sequence of at least two p's.
p$ - It matches any string with p at the end of it.
^p - It matches any string with p at the beginning of it.

Examples

Following examples explain more about matching characters.

[^a-zA-Z] - It matches any string not containing any of the characters ranging from a through z and A through Z.
p.p - It matches any string containing p, followed by any character, in turn followed by another p.
^.{2}$ - It matches any string containing exactly two characters.
<b>(.*)</b> - It matches any string enclosed within <b> and </b>.
p(hp)* - It matches any string containing a p followed by zero or more instances of the sequence hp.

Literal characters

Alphanumeric - Itself
\0 - The NUL character (\u0000)
\t - Tab (\u0009
\n - Newline (\u000A)
\v - Vertical tab (\u000B)
\f - Form feed (\u000C)
\r - Carriage return (\u000D)
\xnn - The Latin character specified by the hexadecimal number nn; for example, \x0A is the same as \n
\uxxxx - The Unicode character specified by the hexadecimal number xxxx; for example, \u0009 is the same as \t
\cX - The control character ^X; for example, \cJ is equivalent to the newline character \n

Metacharacters

A metacharacter is simply an alphabetical character preceded by a backslash that acts to give the combination a special meaning.

For instance, you can search for a large sum of money using the '\d' metacharacter: /([\d]+)000/, Here \d will search for any string of numerical character.

The following table lists a set of metacharacters which can be used in PERL Style Regular Expressions.

. - a single character
\s - a whitespace character (space, tab, newline)
\S - non-whitespace character
\d - a digit (0-9)
\D - a non-digit
\w - a word character (a-z, A-Z, 0-9, _)
\W - a non-word character
[\b] - a literal backspace (special case).
[aeiou] - matches a single character in the given set
[^aeiou] - matches a single character outside the given set
(foo|bar|baz) - matches any of the alternatives specified

Modifiers

Several modifiers are available that can simplify the way you work with regexps, like case sensitivity, searching in multiple lines, etc.

i - Perform case-insensitive matching.
m - Specifies that if the string has newline or carriage return characters, the ^ and $ operators will now match against a newline boundary, instead of a string boundary
g - Performs a global matchthat is, find all matches rather than stopping after the first match.

RegExp Properties

Here is a list of the properties associated with RegExp and their description.

constructor - Specifies the function that creates an object's prototype.
global - Specifies if the "g" modifier is set.
ignoreCase - Specifies if the "i" modifier is set.
lastIndex - The index at which to start the next match.
multiline - Specifies if the "m" modifier is set.
source - The text of the pattern.

RegExp Methods

Here is a list of the methods associated with RegExp along with their description.

exec() - Executes a search for a match in its string parameter.
test() - Tests for a match in its string parameter.
toSource() - Returns an object literal representing the specified object; you can use this value to create a new object.
toString() - Returns a string representing the specified object.

The Tech Platform