Quantifiers: greedy & lazy

Say how many times something repeats

A regular expression, or regex, is a pattern for finding text. A regex is made of small pieces called tokens. A token can be one letter like a, one character class like \d (any digit), or a group in round brackets. On its own, each token matches exactly once.

A quantifier is a mark you put right after a token. It says how many times that token may repeat. For example, a+ means "one or more a characters".

This lesson is only about quantifiers. Other lessons cover the rest:

• How to make a regex, flags, and methods like test: Patterns & flags.
• \d, \w, and square-bracket sets like [a-z]: Character classes & sets.
• Groups in round brackets: Groups & backreferences, the next lesson. Here you will only see one simple group, (?:ab)+.

Start with the three short quantifiers:

• a+ means one or more a characters.
• a* means zero or more a characters.
• a? means zero or one a. In other words, the a is optional.

Notice the word "zero". With * and ?, the pattern can still match when the token is not there at all.

A quantifier belongs only to the one token just before it. In colou?r, only the u is optional. So it matches color and colour, but not colouur.

To repeat more than one character, put them in a group. (?:ab) is a group: round brackets with ?: at the start, which only join a and b into one token. So (?:ab)+ repeats the pair ab.

1const words = "color colour colouur";2console.log(words.match(/colou?r/g).join(", "));3console.log("aaaab".match(/a+b/)?.[0]);4console.log("bbb".match(/a*b/)?.[0]);5console.log("ababab".match(/(?:ab)+/)?.[0]);

match() gives back a list of what it found, or null if it found nothing. ?.[0] takes the first item, which is the matched text. If there is no match, ?. gives undefined instead of an error. Each line prints what its pattern found:

• Line 2: u? allows zero or one u, so it finds color and colour, but not colouur. The g flag at the end means "find every match, not just the first".
• Line 3: a+ takes the whole run of a characters before b, so it finds aaaab.
• Line 4: a* may take zero a characters. The text bbb has no a, so it finds just b.
• Line 5: (?:ab)+ repeats the pair ab, so it finds ababab.

1console.log(/a+b/.test("b"));2console.log(/a*b/.test("b"));3console.log("zabab".match(/(?:ab)+/)?.[0]);

test() gives true if the pattern is found anywhere in the text, and false if not.

• Line 1 prints false. a+ needs at least one a, and the text b has none.
• Line 2 prints true. a* allows zero a characters, so b alone is enough.
• Line 3 prints abab. The match does not have to start at the beginning of the text. It skips the z and starts at the first a.

Curly braces give a count:

• {4} means exactly four.
• {2,} means two or more.
• {2,4} means from two to four.

There is no short way to write "up to four". {,4} does not work in JavaScript. To see why, the next code makes a regex from a string with new RegExp("..."):

• Without the u flag, new RegExp("a{,3}") does not see a quantifier. It looks for the plain text a{,3}.
• With the u or v flag, the same pattern is an error called a SyntaxError.

To say "from zero to four", write {0,4}.

1const pins = ["123", "1234", "12345", "12a4"];2console.log(pins.filter((pin) => /^\d{4}$/.test(pin)).join(", "));3console.log("haaa!".match(/ha{2,}/)?.[0]);4console.log("aaaaa".match(/a{2,4}/)?.[0]);5console.log(new RegExp("a{,3}").test("a{,3}"));6try {7  new RegExp("a{,3}", "u");8} catch (error) {9  console.log(error.name);10}

• Line 2 keeps only 1234. \d means one digit, and {4} asks for four of them. The ^ and $ make the check cover the whole string; you will meet them again later in this lesson.
• Line 3: a{2,} takes two or more a characters, so it finds haaa.
• Line 4: a{2,4} stops at four, so it finds aaaa out of five.
• Line 5 prints true. Without u, the pattern looks for the plain text a{,3}, and finds it.
• Line 7 adds the u flag and throws an error. The catch part runs instead, and line 9 prints SyntaxError.

try and catch work as a pair. JavaScript runs the code in try. If that code throws an error, the code in catch runs instead, with the error in error.

In JavaScript, quantifiers are greedy unless you say otherwise. Greedy means: take as many characters as you can first. Greedy is not a mistake. It is just the order in which JavaScript tries things.

After the greedy part takes all it can, JavaScript checks the rest of the pattern. If the rest cannot match, the greedy part gives back one character, and JavaScript checks again. This giving back is called backtracking. It goes on until the rest of the pattern matches, or until there is nothing left to give back.

Here is a common surprise. The text is say "one" and "two". and the pattern is /".+"/:

• The first " in the pattern finds the first quote in the text.
• A dot, ., means any one character. So .+ means one or more of any character. Greedy .+ takes everything up to the end, even the final period.
• The last " in the pattern still needs a quote. So .+ gives characters back until that " can match the last quote in the text.

The result is one long match, "one" and "two". It is not just "one".

1const text = 'say "one" and "two".';Run2const engineMatch = text.match(/".+"/)[0];3const firstQuote = text.indexOf('"');4let cursor = firstQuote + 1;5while (cursor < text.length) cursor += 1;6while (text[cursor - 1] !== '"') cursor -= 1;7const simulated = text.slice(firstQuote, cursor);8console.log(engineMatch);9console.log(simulated === engineMatch);

The step-through copies what the regex does with a small loop. Line 5 moves a cursor (a position number) to the end of the text, like the greedy grab. Line 6 moves the cursor back until a quote is just before it, like backtracking. Line 9 prints true, because the loop gets the same answer as the real regex on line 2. The loop only works for this one pattern. It is a model to help you picture the steps.

1const text = 'say "one" and "two".';2const engineMatch = text.match(/".+"/)[0];3const firstQuote = text.indexOf('"');4let cursor = firstQuote + 1;5while (cursor < text.length) cursor += 1;6while (text[cursor - 1] !== '"') cursor -= 1;7const simulated = text.slice(firstQuote, cursor);8console.log(engineMatch);9console.log(simulated === engineMatch);

Some other regex tools have possessive quantifiers. A possessive quantifier keeps everything it took and never gives anything back. Those tools write it with a second +, like a++, a*+, or a?+. JavaScript does not have them.

1console.log("aaab".match(/a+b/)?.[0]);2try {3  new RegExp("a++");4} catch (error) {5  console.log(error.name);6}

• Line 1 uses an ordinary + and prints aaab.
• Line 3 tries to make a++. JavaScript throws an error.
• Line 5 catches the error and prints its name, SyntaxError.

In JavaScript, give the pattern a clear place to stop instead. The next section shows one way: a negated class.

Put a ? right after a quantifier to make it lazy:

• +? is a lazy +.
• *? is a lazy *.
• ?? is a lazy ?.
• {2,5}? is a lazy {2,5}.

A lazy quantifier tries the shortest match first. It grows one character at a time, and only when the rest of the pattern cannot match yet.

Lazy does not change the count. +? still needs at least one character. It just tries one character before it tries two.

1const text = 'say "one" and "two".';Run2const lazy = text.match(/".+?"/)[0];3const negated = text.match(/"[^"]*"/)[0];4let end = text.indexOf('"') + 2;5while (text[end] !== '"') end += 1;6const simulated = text.slice(text.indexOf('"'), end + 1);7console.log(lazy);8console.log(negated);9console.log(simulated === lazy);

There is a third way to match one quoted word: a negated class. A negated class is a set in square brackets that starts with ^. It means "any one character except these". So [^"] means any character except a quote. The pattern /"[^"]*"/ reads:

1. a quote,
2. then zero or more characters that are not quotes,
3. then a quote.

The middle part can never hold a quote, so the match must stop at the next quote. For simple quoted text, this is often easier to read than /".*?"/.

1console.log("\"\"".match(/".+?"/)?.[0] ?? "no match");2console.log("\"\"".match(/"[^"]*"/)?.[0]);3console.log("aaab".match(/a+?b/)?.[0]);

In lines 1 and 2, the text "\"\"" is two quote characters, "". Inside a string, \" puts a quote character.

• Line 1 prints no match. +? still needs one character between the two quotes, and there is none. The ?? after the regex is not a quantifier. It means "if the left side is null or undefined, use the right side".
• Line 2 prints "". The negated class uses *, so zero characters between the quotes is fine.
• Line 3 prints aaab, not ab. The search starts at the first a. Lazy a+? takes one a, but the next character is another a, not b. So it grows until the b can match.

1const text = 'say "one" and "two".';2const pattern = /".+"/g;3const matches = [...text.matchAll(pattern)].map((match) => match[0]);4console.log(matches.join(" | "));

The table compares the three patterns on the same text, say "one" and "two". Each row is one pattern.

Quantifiers are small, but you will see them in a lot of everyday code:

• a four-digit PIN,
• cleaning up extra spaces,
• quoted values, like name="Ada",
• simple Markdown, like **bold**.

They often work together with character classes from the last lesson, and with anchors from a later lesson.

1const pins = ["4829", "48290", "48a9"];2console.log(pins.filter((pin) => /^\d{4}$/.test(pin)).join(", "));3console.log("too    much \t space".replace(/\s+/g, " "));4const attributes = 'name="Ada" title="Engineer"';5console.log(attributes.match(/"[^"]*"/g).join(", "));6console.log("Use **bold** here".replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"));

• Line 2 uses ^\d{4}$ to keep only strings that are exactly four digits. ^ means "the start of the string", and $ means "the end of the string". These marks are called anchors. With them, the check covers the whole string. The Anchors & lookaround lesson covers them.
• Line 3: \s means one space-like character, such as a space or a tab. \s+ matches a run of them, and replace turns each run into one space.
• Line 5 finds each quoted value with the negated class "[^"]*".
• Line 6 turns **bold** into <strong>bold</strong>. \*\* means two real stars; the backslash stops * from being a quantifier. [^*]+ takes one or more characters that are not stars. The round brackets save that text, and $1 puts it back. The next lesson explains saving text with groups.

1const phones = ["+91 9876543210", "9876543210", "+91 12345"];2const phonePattern = /^(?:\+\d{1,3} )?\d{10}$/;3console.log(phones.filter((phone) => phonePattern.test(phone)).join(", "));

• Line 2 has the group (?:\+\d{1,3} ): a plus sign, one to three digits, and a space. \+ is a real plus sign, not a quantifier.
• The ? right after that group makes the whole group optional. The space is inside the group, so a number without a country code needs no space at the start.
• Then \d{10} needs exactly ten digits.
• Line 3 prints +91 9876543210, 9876543210. The short number +91 12345 fails, because 12345 is not ten digits.

This only checks the format of these sample numbers. Real phone numbers around the world need more rules.

Common traps

• ".* means up to the next thing I see." No. Greedy .* first goes as far as it can. Then it gives back only as much as the rest of the pattern needs.
• "* means the token must be in the text." No. * can match nothing at all. This matters when you use the g flag with replace and match.
• "\d{4} checks for a four-digit string." No. It only finds four digits somewhere in the text. Add ^ and $ to check the whole string.
• "Repeating a capture group saves every repeat." No. A capture group is a group in plain round brackets, like ([abc]). It saves the text it matched. When it repeats, JavaScript keeps only the last repeat.

Each row of the table is one trap: what goes wrong, why, and what to do instead.

1const html = "<strong>one</strong><strong>two</strong>";2console.log(html.match(/<strong>.*<\/strong>/)[0]);3console.log(html.match(/<strong>.*?<\/strong>/)[0]);4console.log(html.match(/<strong>[^<]*<\/strong>/)[0]);

The text here looks like HTML, but it is just a string. In <\/strong>, the backslash lets the regex hold a / without ending.

• Line 2 uses greedy .*, so the match runs from the first <strong> to the last </strong>.
• Line 3 uses lazy .*?, so it stops at the first </strong>.
• Line 4 uses [^<]*, which can never go past a <. It also stops at the first </strong>.

For real web pages, use an HTML parser, not a regex.

1console.log("abc".replace(/x*/g, "-"));2console.log("xx".replace(/x*/g, "-"));3console.log("abc".match(/x*/g).length);

An empty match is a match of zero characters. It happens at a spot between characters.

• Line 1: x* finds zero x characters at four spots: before a, between the letters, and after c. replace puts a - at each spot, so it prints -a-b-c-.
• Line 2: in xx, x* first takes both x characters. Then it finds one more empty match at the end. So it prints --.
• Line 3: match with the g flag finds 4 matches in abc, and all of them are empty.

replace and match move on by one character after an empty match, so they always finish. If you write your own loop with exec(), you must do that step yourself. lastIndex is the position where the regex starts its next search. After an empty match, add 1 to lastIndex. Otherwise the loop finds the same empty match again and again.

1const capture = "abc".match(/([abc])+/);2console.log(capture[0]);3console.log(capture[1]);4console.log("ababab".match(/(?:ab)+/)[0]);

• Line 2 prints abc, the full match.
• Line 3 prints c. The group ([abc]) ran three times: a, then b, then c. Each time, it saved over the last one, so only c is left.
• Line 4 uses (?:ab)+. This group only joins characters together. It saves nothing.

To get every repeated piece, find each piece on its own. For example, use matchAll with a pattern for one piece and the g flag. matchAll gives back every match, one by one.

Key takeaways

• A quantifier repeats only the one token just before it. To repeat more than one character, put them in a group, like (?:ab)+.
• + needs at least one. * and ? can match zero.
• Use {n} for exactly n, {n,} for n or more, and {n,m} for n to m. For "up to m", write {0,m}, not {,m}.
• Greedy quantifiers try the longest match first, then give characters back. Lazy quantifiers try the shortest match first, then grow.
• For simple quoted text, a negated class like "[^"]*" is often easier to read than a lazy .*?, because it says exactly where to stop.

Up next: Groups & backreferences. There you will learn groups that save text, groups that only join, "this or that" choices, and how to match the same text again.