Regular Expressions (RegExp) in JavaScript

Posted on: January 16, 2020 by Dillion Megida

When working in any programming language, you may want to search characters within strings most of the time. It’s very easy to perform the following check;

if(text === "javascript") {
    console.log("Correct text!")
}

But, what you are searching for may not be equivalent to the entire content of the string. It may just be part of it – at the beginning, or end or just somewhere. In order to achieve this, Regular Expressions (short form – RegEx or RegExp) are used.

What are Regular Expressions?

These are sequence of characters which define a search pattern that can be used on strings.

How to Create a RegEx

There are two methods involved in creating regular expressions which are:

1. Calling the constructor function of the RegExp object

let reg = new RegExp('^jav');

2. Using a regular expression literal

Using a regular expression literal.let reg = /^jav/

As seen above, the expression is declared between the slashes for literals while for the constructor function, the expression is declared as an argument of type string.

The major difference between these two syntaxes is that expressions (like string template literals) can be used in the constructor function but not in the literal expression because it is fully static.

Literal expressions are used when the regex is known before execution. But the first syntax is used when there is need to create a reg during run time (such as after taking user input).

The expression ^jav matches strings which begin (^) with “jav“. We’d be looking at more ways of declaring expressions later in this article.

Application of Regular Expressions

Expressions can be used with test() and exec() methods of the RegExp object.

test(): Here, you can use the expression to test a string. It returns true if it matches the string or false if otherwise.
exec(): This method returns an array of information (index, input and group) and updates the lastIndex property of the regex object if it matches the string. Otherwise, it returns null. It can be used to search for multiple matches in a string.

For these methods, the syntax for application is regex.method(string) . The method is applied to the declared expression and takes an argument of the string which it is tested on.

Regex can also be used with match(), search(), replace() and split() methods of the String object.

match(): If it matches, it returns an array containing all matches and if it doesn’t, it returns null
search(): This returns the index of the match on the string when applied. If it doesn’t match, it returns -1
replace(): This searches for the pattern declared for the string and replaces it with a new string.
split(): This method is used to break a string into an array of substrings. The division is done by putting a breakpoint as a replacement for the matched expression

For these methods, the syntax for application is string.method(regex). The method is applied on the target string and takes an argument of the declared expression

Methods of Declaring Expressions

There are numerous ways of declaring expressions, but we’d look at the major ones. The terms to consider are:

Flags

These are used at the end of the expression which can affect the search in many ways. The major ones include

i – this makes the search case-insensitive
g – This makes the pattern search for all matches. By default, only the first match is returned.

Others are m (Multitline Mode), s (dotall mode), u (full unicode support) and y (sticky mode).

Metacharacters

These are characters used in expressions with special meaning. Some of them are:

\w – Find a word character
\W – Find a non-word character
\d – Find a digit
\D – Find a non-digit character
. – Find any single character (newline or line terminator exclusive)
\s – Find a whitespace character
\S – Find a non-whitespace character

Quantifiers

These are used to determine occurences of characters. Some of them are

+ – e.g a+ This matches any string that contains at least one a. There is no limit to the number of as.
* – e.g a* This matches any string that contains zero or many as.
^ – e.g ^abc As seen in our example above, this matches any string with abc as the starting characters
$ – e.g abc$ The opposite of ^, this matches any string with abc as the ending characters
{x} – e.g a{5} This matches any string with the occurrence of a 5 times.
{x,y} – e.g a{5,9} This holds a range which is minimum of 5 and maximum of 9 for the occurence of a
{x,} – e.g a{5,} Similar to the above, which does not have any maximum.

Brackets

[abs] – Matches a string with any of the characters – either a, b or c
[^abs] – Matches a string with NON of the characters within the brackets. Do not mistake this starting characters.
[0-9] – Matches a string with any digit between 0 and 9.
[^08] – Matches a string with non of the digits between 0 and 8. If 9 were to replace 8, it would mean that the expression matches a string with non-digits.
(a|b) – Matches a string with either a or b

Examples

1. Replacing Text

let str = "This is a normal sentence";
let reg1 = /^this/i
let reg2 = /a normal/

const replacedStr = str.replace(reg1, "That").replace(reg2, "an abnormal");
console.log(replacedStr);
// Expected output
// This is an abnormal sentence

We declared two expressions.

The first one matches if the string starts with “this”. The i flag ensures that it is case-insensitive, that’s why “this” === “This”.
The second expression matches the string if it has the string “a normal”.

Then we replace the first expression match with “That” and we replace the second expression match in the returned string with “an abnormal”.

2. Validate password.

Let’s say we want to ensure the password a user enters is a string with his first name, an underscore and at least 5 characters.

Since we’d be using a first name variable, we cannot use the literal expression. We don’t know what the user’s first name is. Right?

We’d have;

let submitBtn = querySelector('#registerUserBtn');
submitBtn.addEventListener("submit", () => {
    let firstname = querySelector('#userFirstName').value;
    let password = querySelector('#userPassWord').value;
    let reg = new RegExp(`^${firstname}_.{5,}`);

    if(reg.test(password)) {
        alert("Successfully registered!")
    } else {
        alert("Your password must begin with your firstname followed by an underscore and at least 5 characters added.")
    }
})

From this example, we are able to create an expression to validate the password entered by a user.

There are more complex applications of RegEx, but I believe with this article, you’ve gotten to understand how to apply it wherever you want.