Sign in Subscribe

WTH is Regular Expressions and how to use it in JavaScript

Joff Tiquez

• 3 min read
WTH is Regular Expressions and how to use it in JavaScript
Photo by Nik / Unsplash

Regular expressions, or RegEx, are a powerful tool for pattern matching and manipulation in strings. JavaScript provides robust support for working with RegEx, which can make your life easier when dealing with complex string operations. This beginner-friendly blog will introduce you to the fundamentals of JavaScript RegEx and provide code examples to help you understand and master this powerful feature.

What is a Regular Expression?

A regular expression is a sequence of characters that defines a search pattern. You can use this pattern to match, search, or replace text in strings. In JavaScript, regular expressions are objects created with the RegExp constructor or by using a literal notation with forward slashes (/pattern/).

Creating RegEx Patterns

There are two ways to create a RegEx pattern in JavaScript:

Using RegExp Constructor

let pattern = new RegExp("pattern", "flags");

Using Literal Notation

let pattern = /pattern/flags;

In both methods, the "pattern" is the search pattern you want to use, and the "flags" are optional modifiers for the pattern.

RegEx Flags

Flags are single-letter modifiers that change the behavior of a regular expression. The most common flags in JavaScript are:

  • g: global search, which finds all matches instead of stopping after the first one.
  • i: case-insensitive search, which ignores the case of the characters.
  • m: multiline search, which enables the pattern to work across multiple lines.

Basic RegEx Patterns

Here are some basic RegEx patterns to get you started:

  • \d: matches any digit (0-9).
  • \w: matches any word character (letters, digits, or underscores).
  • \s: matches any whitespace character (spaces, tabs, or line breaks).
  • .: matches any character except for a newline.

You can also use quantifiers to specify the number of occurrences of a pattern:

  • ?: matches zero or one occurrence.
  • *: matches zero or more occurrences.
  • +: matches one or more occurrences.
  • {n}: matches exactly n occurrences.

RegEx Methods in JavaScript

JavaScript provides several methods to work with RegEx patterns:

exec()

Returns the first match in a string or null if no match is found.

let regex = /javascript/i;
let text = "I love JavaScript!";
let result = regex.exec(text);
console.log(result); // ["JavaScript", index: 7, input: "I love JavaScript!", groups: undefined]

test()

Checks if a string contains a match and returns true or false.

let regex = /javascript/i;
let text = "I love JavaScript!";
let result = regex.test(text);
console.log(result); // true

match()

Finds all matches in a string and returns an array or null if no matches are found.

let regex = /\d+/g;
let text = "I have 3 apples and 5 oranges.";
let result = text.match(regex);
console.log(result); // ["3", "5"]

replace()

Replaces matched substrings with a new value.

let regex = /apples/gi;
let text = "I have 3 apples and 5 apples.";
let result = text.replace(regex, "bananas");
console.log(result); // "I have 3 bananas and 5 bananas."

RegEx Groups

You can use parentheses to create groups in your RegEx pattern. Groups allow you to capture and manipulate specific parts of the matched text.

Capturing Groups

Capturing groups are defined using parentheses (()). The matched text in these groups can be accessed later. Each group is assigned a number, starting from 1.

let regex = /(\d{3})-(\d{2})-(\d{4})/;
let text = "My SSN is 123-45-6789.";
let result = regex.exec(text);
console.log(result); // ["123-45-6789", "123", "45", "6789", index: 10, input: "My SSN is 123-45-6789.", groups: undefined]

Non-capturing Groups

If you want to use a group without capturing the matched text, you can use a non-capturing group by adding ?: after the opening parenthesis.

let regex = /(?:\d{3})-(?:\d{2})-(\d{4})/;
let text = "My SSN is 123-45-6789.";
let result = regex.exec(text);
console.log(result); // ["123-45-6789", "6789", index: 10, input: "My SSN is 123-45-6789.", groups: undefined]

Named Capturing Groups

Named capturing groups allow you to assign a name to each group using the syntax (?<name>...). These names can be used later to reference the matched text.

let regex = /(?<areaCode>\d{3})-(?<prefix>\d{2})-(?<lineNumber>\d{4})/;
let text = "My SSN is 123-45-6789.";
let result = regex.exec(text);
console.log(result.groups); // {areaCode: "123", prefix: "45", lineNumber: "6789"}

Backreferences

Backreferences allow you to refer to a previously matched group using \n (where n is the group number) in the pattern or the replacement string.

let regex = /(\w)\1/g; // This pattern matches any two consecutive identical characters.
let text = "Aardvark";
let result = text.match(regex);
console.log(result); // ["aa", "rr"]

let regex = /(\d{3})-(\d{2})-(\d{4})/;
let text = "My SSN is 123-45-6789.";
let result = text.replace(regex, "$1$2$3");
console.log(result); // "My SSN is 123456789."

JavaScript RegEx is a powerful tool that can simplify complex string operations. This blog has introduced you to the basics of RegEx, including creating patterns, using flags, working with groups, and applying JavaScript RegEx methods. With practice and experimentation, you'll be able to harness the power of RegEx to make your JavaScript code more efficient and easier to read.

About the author

Joff Tiquez, hailing from Manila, Philippines, is the individual behind the establishment of OSSPH. He is a web developer who strongly supports open source and has been overseeing projects like Vue Stripe for an extended period. To get in touch with Joff, you can visit https://bento.me/jofftiquez.