Regular Expressions

Pattern matching in JavaScript — the syntax, the flags, named groups, and the string methods that use them.

What it is, in plain English: A regular expression (regex) is a pattern that describes a set of strings. You use it to test whether a string matches a pattern, to find matches inside a string, or to replace parts of a string. Regex looks intimidating at first — it's dense and symbol-heavy. But once you learn a handful of building blocks, you can describe almost any text pattern. JavaScript has regex built in — no imports needed.

Where this bites you

When the pattern comes from a variable, such as a search box, new RegExp(text) reads that text as regex syntax, not as plain characters. A user searching for 1.5 gets every price where any character sits between a 1 and a 5, because . means "any character". Input such as c++ is worse: it isn't a valid pattern at all, and the constructor throws SyntaxError: Invalid regular expression: /c++/: Nothing to repeat.

const prices = ["1.5", "105", "125"];
const search = "1.5";                       // typed by the user

const re = new RegExp(search);
console.log(prices.filter(p => re.test(p)));
// [ '1.5', '105', '125' ]

Pattern matching — finding and working with text patterns

A regular expression describes a pattern in text. Instead of checking if a string equals "hello", you can check if it contains an email address, starts with a number, or matches a date format. Regex is dense to read but logical once you learn the building blocks.

Writing a regex

// Slash notation — the most common:
const pattern = /hello/;   // pattern that matches the literal text "hello"

// test() — does the string contain this pattern?
console.log(/hello/.test("say hello there"));  // true
console.log(/hello/.test("goodbye"));          // false

Slash notation, as above, is for patterns you write into the code. To build a pattern from text at runtime, use the RegExp constructor, and escape the text first so every special character is matched literally. The helper below is the escaping function given in MDN's regular expressions guide. (A built-in RegExp.escape() has since been added to the language, but Node 22 doesn't have it, so check your runtime before relying on it.)

const prices = ["1.5", "105", "125"];
const search = "1.5";

const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const re = new RegExp(escapeRegExp(search));
console.log(prices.filter(p => re.test(p)));
// [ '1.5' ]

The essential building blocks

// Literal characters — match exactly:
/cat/      // matches "cat" anywhere in the string

// . (dot) — any single character except newline:
/c.t/      // matches "cat", "cut", "c3t", "c t" — any character in the middle

// Character classes [] — one of these characters:
/[aeiou]/  // any vowel
/[a-z]/    // any lowercase letter
/[0-9]/    // any digit (same as \d)
/[^aeiou]/ // NOT a vowel (^ inside [] means "not")

// Shorthand character classes:
// \d = [0-9]  digit
// \w = [a-zA-Z0-9_]  word character (letter, digit, underscore)
// \s = whitespace (space, tab, newline)
// \D, \W, \S = the OPPOSITES (non-digit, non-word, non-space)

// Quantifiers — how many times:
/a*/     // 0 or more a's
/a+/     // 1 or more a's
/a?/     // 0 or 1 a (optional)
/a{3}/   // exactly 3 a's
/a{2,4}/ // 2 to 4 a's

// Anchors — position, not characters:
/^hello/  // "hello" at the START of the string
/world$/  // "world" at the END of the string
/hello/ // "hello" as a whole word (word boundary)

Flags — modifying how the pattern behaves

const text = "Hello World HELLO world";

/hello/.test(text)    // false — case-sensitive by default
/hello/i.test(text)   // true  — i flag: case-insensitive

text.match(/hello/i)   // ["Hello"] — first match only
text.match(/hello/gi)  // ["Hello", "HELLO", "hello"] — g flag: find all matches

// Common flags:
// i — case-insensitive
// g — global (find ALL matches, not just first)
// m — multiline (^ and $ match line start/end, not just string start/end)
// s — dotAll (. matches newlines too)
// u — unicode (full unicode support)

Using regex with string methods

const text = "The price is $12.99 and was $15.00";

// match() — find matches:
text.match(/\$[\d.]+/g)         // ["$12.99", "$15.00"]
text.match(/\$[\d.]+/)          // ["$12.99"] — first only (no g flag)

// test() — boolean check:
/^\d{4}-\d{2}-\d{2}$/.test("2026-06-27")  // true — looks like an ISO date
/^\d{4}-\d{2}-\d{2}$/.test("27-06-2026")  // false — wrong order

// replace() — substitute matched text:
"hello   world".replace(/\s+/g, " ")    // "hello world" — collapse spaces
"2026-06-27".replace(/-/g, "/")         // "2026/06/27" — swap delimiters

// split() — split on a pattern:
"one  two   three".split(/\s+/)         // ["one", "two", "three"]

// search() — index of first match, or -1:
"hello world".search(/world/)           // 6

Capturing groups — extract parts of a match

// Parentheses create a capturing group:
const date = "2026-06-27";
const match = date.match(/(\d{4})-(\d{2})-(\d{2})/);

if (match) {
  console.log(match[0]);  // "2026-06-27" — full match
  console.log(match[1]);  // "2026" — first group
  console.log(match[2]);  // "06"   — second group
  console.log(match[3]);  // "27"   — third group
}

// Named groups — much clearer:
const named = date.match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
console.log(named.groups.year);   // "2026"
console.log(named.groups.month);  // "06"
console.log(named.groups.day);    // "27"

Try It Yourself

// Two ways to write a regex:
const pattern1 = /hello/;          // literal syntax (preferred)
const pattern2 = new RegExp("hello"); // constructor (when pattern is dynamic)

// test() — does the string match? Returns true/false
console.log(/hello/.test("hello world"));  // true
console.log(/hello/.test("goodbye"));      // false

// Flags change how matching works:
const text = "Hello World HELLO";
console.log(/hello/i.test(text));   // true — i = case-insensitive

// match() — find matches, return them
const email = "Contact us at hello@codex.expert or info@codex.expert";
const emailPattern = /[a-z]+@[a-z.]+/g;  // g = global (find all)
console.log(email.match(emailPattern));
// ["hello@codex.expert", "info@codex.expert"]

// Named groups — label your captures
const dateStr = "2026-06-27";
const datePattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = dateStr.match(datePattern);
console.log(result.groups.year);   // "2026"
console.log(result.groups.month);  // "06"
console.log(result.groups.day);    // "27"

// replace() — swap matched text
const messy = "Hello   World  with   extra  spaces";
const clean = messy.replace(/\s+/g, " ");
console.log(clean);   // "Hello World with extra spaces"

// replaceAll with a function — transform each match
const sentence = "the quick brown fox";
const titleCase = sentence.replace(/\b\w/g, c => c.toUpperCase());
console.log(titleCase);   // "The Quick Brown Fox"

Lookaheads, replace with functions, and matchAll

Lookaheads and lookbehinds

// Lookahead — match X only if followed by Y (Y not included in match):
/\d+(?= dollars)/   // matches digits followed by " dollars"
"100 dollars".match(/\d+(?= dollars)/)[0]  // "100"
"100 euros".match(/\d+(?= dollars)/)       // null — no match

// Negative lookahead — match X only if NOT followed by Y:
/\d+(?! dollars)/   // digits NOT followed by " dollars"

// Lookbehind — match X only if preceded by Y:
/(?<=\$)\d+/        // digits preceded by $
"$100".match(/(?<=\$)\d+/)[0]   // "100"

// Negative lookbehind:
/(?<!\$)\d+/        // digits NOT preceded by $

replace() with a function — powerful transformations

// The function receives (fullMatch, ...groups, offset, originalString):
const titleCase = "the quick brown fox"
  .replace(/\w/g, (char) => char.toUpperCase());
console.log(titleCase);  // "The Quick Brown Fox"

// Template variable substitution:
const template = "Hello, {{name}}! You have {{count}} messages.";
const vars = { name: "Alice", count: 5 };
const filled = template.replace(/\{\{(\w+)\}\}/g, (_, key) => vars[key] ?? "");
console.log(filled);  // "Hello, Alice! You have 5 messages."

// camelCase to kebab-case:
"myVariableName".replace(/([A-Z])/g, "-$1").toLowerCase()
// "my-variable-name"

matchAll — iterate over all matches with groups

// matchAll requires the g flag — returns an iterator of match objects:
const html = '<a href="https://example.com">Link</a> <a href="https://codex.expert">Codex</a>';
const linkPattern = /<a href="(?<url>[^"]+)">(?<text>[^<]+)<\/a>/g;

for (const match of html.matchAll(linkPattern)) {
  console.log(`Text: ${match.groups.text}, URL: ${match.groups.url}`);
}
// Text: Link, URL: https://example.com
// Text: Codex, URL: https://codex.expert

// Collect all matches:
const matches = [...html.matchAll(linkPattern)];
const urls = matches.map(m => m.groups.url);
console.log(urls);  // ["https://example.com", "https://codex.expert"]

Common regex patterns

// Email (simplified — real validation is complex):
/^[^\s@]+@[^\s@]+\.[^\s@]+$/

// UK/US phone (flexible):
/^\+?[\d\s\-().]{7,15}$/

// ISO date:
/^\d{4}-\d{2}-\d{2}$/

// URL:
/^https?:\/\/[^\s/$.?#].[^\s]*$/i

// Strong password (8+ chars, upper, lower, digit, special):
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/

// Only use these as quick checks — never as the sole validation for security.

Backtracking, the RegExp spec, and Unicode

How regex engines work — NFA and backtracking

JavaScript's regex engine uses a Non-deterministic Finite Automaton (NFA) with backtracking. When a match fails partway through, the engine backtracks to the last choice point and tries an alternative. This allows powerful features (lookaheads, backreferences) but can cause catastrophic backtracking with poorly written patterns:

// Catastrophic backtracking — exponential time for certain inputs:
const bad = /^(a+)+$/;  // nested quantifier — avoid this pattern!
// bad.test("aaaaaaaaaaaaaaab");  // hangs for seconds or crashes

// Fix: use atomic groups (not in JS) or possessive quantifiers (ES2024 v flag):
// Or restructure: /^a+$/ is the same intent but safe

The v flag — Unicode sets (ES2024)

// The v flag adds Unicode set notation and string properties:
/^\p{Emoji}+$/v.test("😀🎉");   // true — Unicode emoji property
/[\p{Letter}&&\p{ASCII}]/v;      // intersection: ASCII letters only
/[[\p{Number}]--[\p{ASCII}]]/v;  // difference: non-ASCII numbers

Named backreferences

// Reference a named group later in the same pattern:
const htmlTag = /<(?<tag>\w+)>.*?<\/\k<tag>>/s;
"<div>content</div>".match(htmlTag);    // matches
"<div>content</span>".match(htmlTag);   // null — tags don't match

RegExp internals (ECMA-262 §22.2)

RegExp objects have internal slots: [[OriginalSource]] (the pattern string), [[OriginalFlags]], [[RegExpMatcher]] (the compiled pattern). The exec() method (which all string methods call internally) advances [[LastIndex]] when the g or y flag is set — this is why reusing a stateful regex across calls without resetting lastIndex causes subtle bugs:

const re = /a/g;
re.test("abc");   // true  — lastIndex advances to 1
re.test("abc");   // false — starts searching from index 1, misses "a"
re.test("abc");   // true  — lastIndex reset to 0 after failing

// Safer: always create a new regex, or reset lastIndex manually:
re.lastIndex = 0;

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.