JavaScript RegExp Patterns

This lesson puts every regex piece together into practical, reusable patterns: the ones you will actually need for forms and text cleanup. Each is broken down piece by piece so you can adapt it instead of copying blindly.

// How to Build a Pattern

1. Write down 3 examples that should match and 3 that should not
2. Describe the shape in words: "3 digits, a dash, 4 digits"
3. Translate each word into a regex piece
4. Anchor with ^ and $ for validation
5. Test every example, including the ones that should fail

// US Zip Code (with optional +4)

const zip = /^\d{5}(?:-\d{4})?$/;
//          5 digits  optional group: dash + 4 digits

zip.test("21201")        // true
zip.test("21201-4410")   // true
zip.test("2120")         // false

// US Phone Number (flexible)

const phone = /^\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/;
//             optional ( ) around area code, optional separators

phone.test("410-555-0199")     // true
phone.test("(410) 555-0199")   // true
phone.test("4105550199")       // true
phone.test("555-0199")         // false

// Email (practical, not perfect)

const email = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
//             something @ something . at least 2 more, no spaces or extra @

email.test("ava@school.org")   // true
email.test("ava@school")       // false
email.test("ava @school.org")  // false

// Hex Color

const hex = /^#(?:[0-9a-f]{3}){1,2}$/i;
//           # then 3 hex digits, once or twice (so 3 or 6 total)

hex.test("#fff")      // true
hex.test("#1A2b3C")   // true
hex.test("#abcd")     // false

// Date: YYYY-MM-DD

const isoDate = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
//                     month 01-12       day 01-31

isoDate.test("2026-10-02")   // true
isoDate.test("2026-13-02")   // false  (month 13)
isoDate.test("2026-02-31")   // true   (!)

// 24-Hour Time

const time24 = /^([01]\d|2[0-3]):[0-5]\d$/;

time24.test("09:45")   // true
time24.test("23:59")   // true
time24.test("24:00")   // false

// Username

const username = /^[a-z][a-z0-9_]{2,15}$/i;
//               starts with a letter, then 2-15 letters/digits/underscores (3-16 total)

// Text Cleanup Patterns

// Collapse extra spaces
"too    many   spaces".replace(/\s+/g, " ")          // "too many spaces"

// URL slug from a title
"Hello, World! JS 101".toLowerCase()
  .replace(/[^a-z0-9]+/g, "-")
  .replace(/^-|-$/g, "")                             // "hello-world-js-101"

// Strip HTML tags (for simple, trusted text only)
"<p>Hi <b>there</b></p>".replace(/<[^>]+>/g, "")        // "Hi there"

// Capitalize each word
"the quick fox".replace(/\b\w/g, c => c.toUpperCase())    // "The Quick Fox"

// The Full Syntax Reference

W3Schools' "Patterns" page is a one-page reference for every piece of regex syntax. Here it is, with the lesson that teaches each part. Every pattern above is built from these pieces.

Flags (RegExp Flags)

Character classes (RegExp Classes)

Metacharacters (RegExp Metacharacters)

Assertions (RegExp Assertions)

Quantifiers (RegExp Quantifiers)

A few of these have not appeared in an example yet:

const text = "Café 42!";

console.log(text.match(/\p{L}/gu).join(""));   // letters, in any language
console.log(text.match(/\P{L}/gu));            // everything that is NOT a letter
console.log(text.match(/\S/g).length);            // characters that are not whitespace
console.log(/[\b]/.test("a\bb"), /\t/.test("a\tb"), /\0/.test("a\0b"));

// Quick Reference

// Quick Check

const time24 = /^([01]\d|2[0-3]):[0-5]\d$/;
console.log(time24.test("7:30"), time24.test("07:30"));

// Try It

▶ Open Playground

1. Click Open Playground. Test the phone pattern with 6 inputs you write yourself: 3 good, 3 bad
2. Write the username pattern and change it so it must be all lowercase
3. Write a pattern for a license plate in the format 1 digit, 3 letters, 3 digits (like "1ABC234")
4. Combine the ISO date regex with a Date check so "2026-02-31" is rejected