Understanding and Using Regular Expressions in JavaScript

Introduction

Regular expressions (regex) are powerful text‑matching tools in JavaScript, but their many symbols can be daunting for beginners. This guide shares practical tips and core concepts to help you use regex effectively without memorizing every detail.

Basic Concepts

A regular expression describes a pattern that matches a set of strings. It can be used for validation, searching, replacing, and extracting text.

Creating a RegExp

Two ways to create a regex:

Literal syntax: /pattern/flags

Constructor: new RegExp('pattern', 'flags')

Example literals:

const rex = /pattern/;

Example constructor:

const rex = new RegExp('pattern');

RegExp Instance Methods

The most common methods are test() (returns true/false) and exec() (returns an array with match details).

const regex = /a/ig;
const str = "Action speak louder than words";
console.log(regex.test(str)); // true
console.log(regex.exec(str)); // ["a", index: 0, ...]

Modifiers

Modifiers change how a pattern works:

g – global search (find all matches)

i – case‑insensitive

m – multiline (affects ^ and $)

Example: /\d+/gi matches all numbers regardless of case.

Character Classes and Ranges

Use brackets [] to define a set of characters, e.g., /[bcf]at/gi matches "bat", "cat", "fat". Ranges like [a‑z] match any lowercase letter.

Quantifiers

Specify how many times a token may repeat:

+ – one or more (equivalent to {1,} )

* – zero or more ( {0,} )

? – zero or one ( {0,1} )

{m,n} – between m and n times

Special Characters

Metacharacters such as . (any character), \ (escape), | (alternation), and [^] (negated set) allow more complex patterns.

Position Matching

Anchors and word boundaries help match positions:

^ – start of string (or line with m )

$ – end of string

\b – word boundary

\B – non‑word boundary

Capture Groups

Parentheses (...) capture sub‑matches. Non‑capturing groups use (?:...) . Named groups use (? ...) and can be referenced with $ in replacements.

const regex = /(Testing|tests) 123/ig;
const str = `Testing 123\nTests 123`;
console.log(str.replace(regex, '$1 234'));
// Output: "Testing 234\nTests 234"

Look‑Ahead and Look‑Behind

Assertions allow conditional matching without consuming characters:

Positive look‑ahead: (?=...)

Negative look‑ahead: (?!...)

Positive look‑behind: (?<=...)

Negative look‑behind: (?<!...)

Example: /B(?!A)/ matches "B" not followed by "A".

String Methods Supporting Regex

search()

Returns the index of the first match or -1 .

const idx = str.search(/a/ig);
console.log(idx); // 0

match()

Returns an array of all matches (if g flag) or detailed info for the first match.

console.log(str.match(/a/ig)); // ['A','a','a']

matchAll()

Returns an iterator of all matches with capture groups.

for (const m of 'abcabc'.matchAll(/a/g)) {
  console.log(m);
}

replace() and replaceAll()

Replace matched substrings. replaceAll requires the g flag.

const newStr = str.replace(/A/g, 'a');
const allStr = str.replaceAll(/a/g, 'A');

split()

Splits a string by a regex delimiter.

const parts = str.split(/\s+/);

Practical Applications

Data Validation

Validate phone numbers, emails, passwords, or ensure input contains no emoji.

const phoneRegex = /^1[3-9]\d{9}$/;
console.log(phoneRegex.test('13712345678')); // true

Search and Replace

Use regex in IDEs (e.g., VS Code) to find dynamic routes, convert numbers to currency, or replace image URLs with grayscale versions.

const grayImgReplace = (html, imgUrl) => {
  const regex = /(https?:\/\/[^\s"']+\.(jpg|jpeg|png)(?

Data Extraction

Extract image URLs, link hrefs, domains, or repeated words from HTML or plain text.

const getImgs = dom => {
  const imgs = [];
  const pattern = /
]+src=['"]((?!.*\.svg).+?)['"]/g;
  let m;
  while ((m = pattern.exec(dom)) !== null) {
    imgs.push(m[1]);
  }
  return imgs;
};

Data Cleaning

Remove HTML tags, emojis, extra spaces, or normalize dates using regex replace operations.

const clean = text.replace(/<\/?.+?(>|$)/g, '').replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, '');

Useful Regex Tools

Regex101 – interactive tester with explanation.

RegExr – live editor with library of patterns.

Regexpal – simple two‑pane tester.

Regex‑Vis – visualizer and editor.

Regex previewer – VS Code extension for inline testing.