Regular Expressions

Regular expressions — regex for short — are patterns that describe how to match sequences of characters in a string. Once you understand their syntax, tasks that would take dozens of lines of string manipulation collapse into a single concise expression.

JavaScript has first-class support for regex both as a literal syntax and through built-in methods on strings. This lesson walks you from the basics through practical, real-world patterns.

Creating a Regular Expression

You can write a regex two ways: as a literal using forward slashes, or as a RegExp object using the constructor.

// Literal syntax — preferred for known patterns
const pattern = /hello/;

// Constructor syntax — useful when the pattern comes from a variable
const word = "hello";
const dynamic = new RegExp(word);

const sentence = "Say hello to regular expressions";

console.log(pattern.test(sentence));   // true
console.log(dynamic.test(sentence));   // true
console.log(/goodbye/.test(sentence)); // false

The test method returns true or false — it is the simplest way to check whether a pattern appears in a string.

Flags

Flags modify how a pattern is applied. You place them after the closing slash.

Flag	Meaning
`g`	Global — find all matches, not just the first
`i`	Case-insensitive
`m`	Multiline — `^` and `$` match line boundaries

const text = "The quick brown fox. THE QUICK BROWN FOX.";

// Without flags — only matches the first, case-sensitive
const firstOnly = text.match(/the/);
console.log(firstOnly[0]);  // "The"? No — "the" is lowercase, so...
console.log(/the/.test(text)); // false — "The" starts with capital T

// Case-insensitive
console.log(/the/i.test(text));          // true
console.log(text.match(/the/gi));        // ["The", "THE"]

// Global match returns all matches as an array
const words = text.match(/\b\w+\b/g);
console.log(words.length); // number of words found
console.log(words.slice(0, 4)); // ["The", "quick", "brown", "fox"]

Character Classes and Quantifiers

Character classes let you match a set of characters. Quantifiers specify how many times a character or group must appear.

Common character classes:

\d — any digit (0–9)
\w — any word character (letters, digits, underscore)
\s — any whitespace character
. — any character except a newline
[abc] — any of a, b, or c
[^abc] — anything except a, b, or c

Common quantifiers:

* — zero or more
+ — one or more
? — zero or one (optional)
{n} — exactly n times
{n,m} — between n and m times

// Match a date in YYYY-MM-DD format
const datePattern = /\d{4}-\d{2}-\d{2}/;

console.log(datePattern.test("2024-03-15"));  // true
console.log(datePattern.test("24-3-15"));     // false
console.log(datePattern.test("not a date"));  // false

// Extract the date from a string
const log = "Event scheduled for 2024-06-01 in Berlin";
const found = log.match(/\d{4}-\d{2}-\d{2}/);
console.log(found[0]); // "2024-06-01"

// Optional characters — match both "colour" and "color"
const colourPattern = /colou?r/;
console.log(colourPattern.test("colour")); // true
console.log(colourPattern.test("color"));  // true

Capturing Groups

Wrapping part of a pattern in () creates a capturing group. Matched groups are returned alongside the full match when you call match or use exec.

// Parse a time string like "14:35" or "9:05"
const timePattern = /(\d{1,2}):(\d{2})/;

const result = "Meeting at 14:35 tomorrow".match(timePattern);

if (result) {
  const [fullMatch, hours, minutes] = result;
  console.log("Full match:", fullMatch); // "14:35"
  console.log("Hours:", hours);          // "14"
  console.log("Minutes:", minutes);      // "35"
}

// Named groups — cleaner when there are several captures
const named = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const dateStr = "Deadline: 2024-12-31";
const dateResult = dateStr.match(named);

if (dateResult) {
  const { year, month, day } = dateResult.groups;
  console.log(`Year: ${year}, Month: ${month}, Day: ${day}`);
}

Named groups use the (?<name>...) syntax and are accessed through result.groups.

Replacing with `replace` and `replaceAll`

The replace method accepts a regex as its first argument and can reference captured groups in the replacement string using $1, $2, or named groups with $<name>.

// Reformat a date from YYYY-MM-DD to DD/MM/YYYY
const date = "2024-06-15";
const reformatted = date.replace(
  /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
  "$<day>/$<month>/$<year>"
);
console.log(reformatted); // "15/06/2024"

// Redact phone numbers from user-submitted text
const message = "Call me on 07700 900123 or 07700 900456 thanks";
const redacted = message.replace(/\d{5}\s?\d{6}/g, "[REDACTED]");
console.log(redacted); // "Call me on [REDACTED] or [REDACTED] thanks"

// Use a function as the replacement for dynamic transformations
const template = "Hello, {name}! You have {count} messages.";
const values = { name: "Alice", count: 5 };

const rendered = template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
console.log(rendered); // "Hello, Alice! You have 5 messages."

String Methods That Accept Regex

Method	Returns	Use for
`str.test(regex)`	`boolean`	Quick existence check
`str.match(regex)`	array or `null`	Extract matches
`str.search(regex)`	index or `-1`	Find position
`str.replace(regex, replacement)`	new string	Substitute text
`str.split(regex)`	array	Split on a pattern

const csv = "Alice, 30 ,  engineer ; Bob,  25,  designer";

// Split on either commas or semicolons, trimming surrounding spaces
const entries = csv.split(/\s*[,;]\s*/);
console.log(entries);
// ["Alice", "30", "engineer", "Bob", "25", "designer"]

// Validate a simple email format
const emailPattern = /^[\w.+-]+@[\w-]+\.[a-z]{2,}$/i;
const emails = ["user@example.com", "bad@", "also.good@domain.co.uk", "nope"];

emails.forEach(email => {
  console.log(`${email}: ${emailPattern.test(email) ? "valid" : "invalid"}`);
});

Try It Yourself

Build a basic slug generator: take a human-readable title, strip anything that is not a letter, digit, or space, convert to lowercase, and replace spaces with hyphens.

function slugify(title) {
  return title
    .toLowerCase()
    .replace(/[^\w\s-]/g, "")   // remove non-word characters (keep spaces and hyphens)
    .replace(/[\s_]+/g, "-")    // replace spaces and underscores with hyphens
    .replace(/^-+|-+$/g, "");   // trim leading/trailing hyphens
}

const titles = [
  "Hello, World!",
  "  JavaScript & Regular Expressions  ",
  "10 Tips for Writing Clean Code",
  "What's New in ES2024?",
];

titles.forEach(title => {
  console.log(`"${title}" → "${slugify(title)}"`);
});

// Try modifying slugify to also collapse multiple consecutive hyphens
// Hint: /--+/g matches two or more hyphens in a row

Experiment by adding your own titles, or extend slugify to handle accented characters or collapse repeated hyphens.

Key Takeaways

Create regex with /pattern/flags literals for static patterns and new RegExp(str) for dynamic ones.
test checks for a match; match extracts matches into an array (or returns null).
Character classes (\d, \w, \s, [...]) and quantifiers (+, *, ?, {n,m}) are the building blocks of most patterns.
The g flag makes match return every occurrence; without it you only get the first.
Capturing groups (...) let you extract sub-parts of a match; named groups (?<name>...) make replacements and destructuring clearer.
replace with a callback function gives you full control over how each match is transformed.
Anchor your patterns with ^ and $ when you need to match the entire string, not just part of it.

Pro Tip: Use a tool like regex101.com to build and debug patterns interactively — it highlights matches, explains each token, and lets you test against multiple strings in real time. Always add the u flag to new patterns (/pattern/u) to enable full Unicode matching and catch subtle bugs with emoji or non-ASCII characters.