JavaScript RegExp Quantifiers

Quantifiers say how many times the thing before them may repeat. They turn "one digit" into "five digits," "one or more letters," or "an optional s." Every quantifier applies only to the single item right before it: one character, one class, or one group.

// The Quantifiers

"a aa aaa aaaa".match(/\ba{2,3}\b/g)   // ["aa", "aaa"]
"file1 file22 file333".match(/file\d+/g)  // ["file1", "file22", "file333"]
/^https?:\/\//.test("http://x.org")       // true  (the s is optional)

// Quantifiers on Real Text

With the g flag you can see exactly what each quantifier grabs:

const text = "Hellooo World! Hello W3Schools!";
console.log(text.match(/o+/g));     // one or more o's
console.log(text.match(/lo*/g));    // an l, then zero or more o's
console.log("1, 100 or 1000?".match(/10?/g));   // a 1, then an optional 0

const nums = "100, 1000 or 10000?";
console.log(nums.match(/\d{4}/g));     // exactly 4 digits
console.log(nums.match(/\d{3,4}/g));   // 3 to 4 digits
console.log(nums.match(/\d{3,}/g));    // 3 or more digits

// What the Quantifier Applies To

/ha+/       // "h" then one or more "a": ha, haa, haaa
/(ha)+/     // "ha" repeated: ha, haha, hahaha
/[ha]+/     // any mix of h and a: h, aah, hahh

// Greedy by Default

Quantifiers grab as much as possible while still letting the overall pattern match. This is called being greedy, and it causes a classic surprise:

const html = "<b>bold</b> and <i>italic</i>";

html.match(/<.+>/)[0];

You wanted just <b>, but .+ ran all the way to the last > in the text.

// Lazy: Add a ?

Put ? after any quantifier to make it lazy: it takes as little as possible.

html.match(/<.+?>/g);

// Two More Traps

* can match nothing at all

"Zero or more" includes zero. A pattern made only of x* succeeds everywhere, by matching empty text:

console.log("abc".match(/x*/g));

Four empty matches: one before each letter and one at the end. When you need at least one, use +.

There is no {,n}

You might guess /a{,3}/ means "up to 3 a's." It does not. Without the u flag, a { that does not form a valid quantifier is treated as plain text:

console.log(/a{,3}/.test("aaa"));     // not a quantifier...
console.log(/a{,3}/.test("a{,3}"));   // ...it matches this exact text

Write {0,3} instead. With the u flag, the mistake becomes a clear error: new RegExp("a{,3}", "u") is SyntaxError: Invalid regular expression: /a{,3}/u: Incomplete quantifier.

// Rewriting Earlier Patterns

Quantifiers shorten patterns you have already seen:

/^[A-Z][A-Z][A-Z]-\d\d\d\d$/     // before
/^[A-Z]{3}-\d{4}$/               // after: same meaning

/^\d{3}-\d{3}-\d{4}$/            // US phone: 410-555-0199
/^\s+|\s+$/g                     // whitespace at either end (what trim() removes)

// Quick Check

console.log("zzz zz z".match(/z{2}/g));

// Try It

▶ Open Playground

1. Click Open Playground. Match "gray", "grey", and "graaay" with one pattern using a class and a quantifier
2. Write a pattern for a username of 3 to 16 letters, digits, or underscores
3. Open the greedy HTML example with its Try it Yourself button, then fix it two ways: lazy and negated class
4. Collapse every run of 2 or more spaces in a sentence to a single space