Regular Expressions in JavaScript

Regular expressions (regex) are a compact language for describing text patterns — find, validate, extract, replace. From email checks to log parsing, regex is one of the most concentrated powers in the language: a one-line pattern can do what takes twenty lines of string code. This chapter teaches the syntax you will use daily and the traps to avoid.

Two ways to create a regex

const re1 = /abc/g;              // literal — parsed at load time
const re2 = new RegExp('abc', 'g'); // dynamic — needed when the pattern is built at runtime

console.log('xxabc'.includes('abc'));   // string method also accepts patterns:
console.log('xxabc'.search(/abc/));     // → 2

Flags

test and exec

console.log(/\d{3}/.test('abc123'));   // → true  (three digits exist)

const m = /(\d+)-(\d+)/.exec('order 42-7');
console.log(m[0]);   // → '42-7'  (whole match)
console.log(m[1]);   // → '42'    (first group)
console.log(m[2]);   // → '7'

Core pattern syntax

Practical patterns

// digits anywhere
'42 items'.match(/\d+/);              // → ['42']

// starts with, ends with
/^[A-Z]/.test('Hello');               // → true (capital first letter)
/\.(png|jpg|svg)$/i.test('logo.PNG'); // → true

// word count
'one two three'.match(/\S+/g);        // → ['one','two','three']

// strip non-digits (phone formatting)
'call: +1 (555) 123-4567'.replace(/\D+/g, '');   // → '15551234567'

// capture + replace with $1
'2026-03-05'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1');  // → 05/03/2026

match, matchAll, replaceAll

const text = 'a1 b2 c3';

console.log(text.match(/\w\d/g));                 // → ['a1','b2','c3'] (g flag required for all)
console.log([...text.matchAll(/(\w)(\d)/g)]);     // array of full match objects

console.log(text.replaceAll(/\s/g, '-'));         // → 'a1-b2-c3'

Validation with the test method

const isEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
const isPhoneIN = (v) => /^[6-9]\d{9}$/.test(v);      // 10 digits starting 6–9
const hasStrongPass = (v) => v.length >= 8 && /\d/.test(v) && /[A-Z]/.test(v);

console.log(isEmail('a@b.co'));   // → true
console.log(isEmail('nope'));     // → false

Groups for structured extraction

const log = '2026-03-05 14:22 ERROR disk full';
const m = log.match(/^(\S+) (\S+) (\w+) (.+)$/);
console.log(m[1], m[3], m[4]);
// → 2026-03-05 ERROR disk full

Named groups (readability)

const url = '/tutorials/css-for-beginners/box-model';
const { groups } = url.match(/\/(?<tutorial>[^/]+)\/(?<chapter>[^/]+)/) ?? {};
console.log(groups?.tutorial, groups?.chapter);
// → css-for-beginners box-model

Performance and safety

• Catastrophic backtracking — nested quantifiers like (a+)+b can hang on near-misses; keep patterns simple, test against adversarial input (e.g., 50 as).
• Compile once, reuse: const RE = /…/g at module scope (and reset lastIndex with g when reusing across calls — or create fresh per call).
• Regex is not a parser — HTML, JSON and full grammars deserve real parsers.
• Readability beats cleverness — a complex pattern deserves a comment and a unit test.

When NOT to use regex

• Simple containment → includes / startsWith.
• Splitting known separators → split(',').
• Parsing HTML → DOM APIs (HTML entities and markup rules are a job for the parser).

Common mistakes

• Missing g in match — returns only the first match.
• Forgetting anchors — /\d+/ matches digits anywhere; /^\d+$/ matches only digits for the whole string (the validation classic).
• Escaping literals — .+*?^$()[]{} are special; escape with \ when you mean the literal character.
• Reuse of /g regex state — lastIndex persists between test/exec calls, causing alternating results.
• Validation over-reach — regex checks format, not business rules (server still validates).

Practice checklist

1. Write isSlug(s): lowercase letters, digits and single hyphens, 3–50 chars.
2. Extract all dates from a text blob with matchAll and reformat them with groups.
3. Mask a credit-card-like number: keep last 4 digits (replace(/\d(?=\d{4})/g, '*') — then explain every part).
4. Prove the anchoring rule: compare /\d/ and /^\d+$/ against '12a'.

Text is handled — next, the other data workhorses: Dates, Math & Numbers.