JavaScript RegExp

A regular expression (RegExp, or "regex") is a pattern that describes text. Instead of searching for one exact word, you can search for "any 5 digits," "anything that looks like an email," or "every word starting with a capital letter." They look cryptic at first, but they are built from a small set of pieces, and this section teaches them one at a time.

// Writing a Pattern

A regex is written between forward slashes. Letters and numbers match themselves:

const pattern = /cat/;

pattern.test("concatenate")   // true   ("cat" appears inside)
pattern.test("Cat")           // false  (case matters)
pattern.test("dog")           // false

test() is the simplest regex method: does the pattern appear anywhere in the text? Yes or no.

// A Taste of the Power

Special symbols describe kinds of characters and how many of them. A preview of what the rest of this section covers:

/\d/             // any digit
/\d{5}/          // exactly 5 digits in a row
/^\d{5}$/        // the WHOLE text is exactly 5 digits (a US zip code)
/colou?r/        // "color" or "colour" (the u is optional)
/cat|dog/        // "cat" or "dog"
/hello/i         // "hello" ignoring case (the i after the slash is a flag)

const zip = /^\d{5}$/;

zip.test("21201")    // true
zip.test("2120")     // false  (only 4)
zip.test("21201a")   // false  (extra character)

// Where Regexes Get Used

You already met some of these string methods in String Search. They all accept a regex:

const msg = "Order 42 shipped. Order 57 pending.";

msg.search(/\d/)                 // 6
msg.match(/\d+/g)                // ["42", "57"]
msg.replace(/\d+/g, "#")         // "Order # shipped. Order # pending."
"a, b,c ,  d".split(/\s*,\s*/)    // ["a", "b", "c", "d"]

That last one splits on a comma with any amount of space around it, something a plain string separator cannot do.

// More First Examples

The letter after the closing slash is called a flag (W3Schools also calls it a modifier): /pattern/flags. Here are the three string methods with the i (ignore case) flag, plus a first look at the pieces the next lessons cover:

const text = "Visit W3Schools";

console.log(text.search(/w3schools/i));                       // position of the match
console.log(text.match(/W3schools/));                         // no i flag, and the case differs
console.log("Visit Microsoft!".replace(/microsoft/i, "W3Schools"));

console.log("Black, white, red, green, blue".match(/red|green|blue/g));   // | means OR
console.log("Give 100%!".match(/\d/g));                  // \d = any digit
console.log("1, 100 or 1000?".match(/10?/g));             // ? = the 0 is optional

Notice the second line: match returns null when nothing matches, and the pattern W3schools (lowercase s) does not match W3Schools.

// Two Ways to Create a RegExp

// 1. Literal: use when you know the pattern while writing code
const a = /\d+/g;

// 2. Constructor: use when the pattern comes from a variable
const word = "apple";
const b = new RegExp(word, "gi");   // same as /apple/gi

// Practical Example: Tidying Input

const phone = "(410) 555-0199";
const digitsOnly = phone.replace(/\D/g, "");   // \D = anything that is NOT a digit

console.log(digitsOnly);

// How to Approach Regex

// Quick Check

console.log("Room 12, Room 7".match(/\d+/g));

// Try It

▶ Open Playground

1. Click Open Playground and run it. Explain why the two results differ
2. Use /^\d{5}$/ to check three zip codes, one valid and two not
3. Pull every number out of a sentence with match(/\d+/g)
4. Build a regex from a variable with new RegExp and use it to count a word in a paragraph