Lesson guide

Learning objectives

  • Explain the main purpose of Quantifiers +, *, ? and {n} in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in Regular expressions.

Real-world context

This lesson matters when you need to recognize where Quantifiers +, *, ? and {n} fits into real JavaScript programs. Let’s say we have a string like and want to find all numbers in it.

Key ideas

  • Quantifiers +, *, ? and {n} is part of the Regular expressions chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Quantifiers +, *, ? and {n}
  • Quantifiers
  • Regular expressions
  • JavaScript

Let’s say we have a string like +7(903)-123-45-67 and want to find all numbers in it. But unlike before, we are interested not in single digits, but full numbers: 7, 903, 123, 45, 67.

A number is a sequence of 1 or more digits \d. To mark how many we need, we can append a quantifier.

Quantity {n}

The simplest quantifier is a number in curly braces: {n}.

A quantifier is appended to a character (or a character class, or a [...] set etc) and specifies how many we need.

It has a few advanced forms, let’s see examples:

The exact count: {5}

\d{5} denotes exactly 5 digits, the same as \d\d\d\d\d.

The example below looks for a 5-digit number:

javascript
alert( "I'm 12345 years old".match(/\d{5}/) );

We can add \b to exclude longer numbers: \b\d{5}\b.

The range: {3,5}, match 3-5 times

To find numbers from 3 to 5 digits we can put the limits into curly braces: \d{3,5}

javascript
alert( "I'm not 12, but 1234 years old".match(/\d{3,5}/) ); // "1234"

We can omit the upper limit.

Then a regexp \d{3,} looks for sequences of digits of length 3 or more:

javascript
alert( "I'm not 12, but 345678 years old".match(/\d{3,}/) ); // "345678"

Let’s return to the string +7(903)-123-45-67.

A number is a sequence of one or more digits in a row. So the regexp is \d{1,}:

javascript
let str = "+7(903)-123-45-67";

let numbers = str.match(/\d{1,}/g);

alert(numbers); // 7,903,123,45,67

Shorthands

There are shorthands for most used quantifiers:

+

Means “one or more”, the same as {1,}.

For instance, \d+ looks for numbers:

javascript
let str = "+7(903)-123-45-67";

alert( str.match(/\d+/g) ); // 7,903,123,45,67

?

Means “zero or one”, the same as {0,1}. In other words, it makes the symbol optional.

For instance, the pattern ou?r looks for o followed by zero or one u, and then r.

So, colou?r finds both color and colour:

javascript
let str = "Should I write color or colour?";

alert( str.match(/colou?r/g) ); // color, colour

*

Means “zero or more”, the same as {0,}. That is, the character may repeat any times or be absent.

For example, \d0* looks for a digit followed by any number of zeroes (may be many or none):

javascript
alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1

Compare it with + (one or more):

javascript
alert( "100 10 1".match(/\d0+/g) ); // 100, 10
// 1 not matched, as 0+ requires at least one zero

More examples

Quantifiers are used very often. They serve as the main “building block” of complex regular expressions, so let’s see more examples.

Regexp for decimal fractions (a number with a floating point): \d+\.\d+

In action:

javascript
alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 12.345

Regexp for an “opening HTML-tag without attributes”, such as <span> or <p>.

  1. The simplest one: /<[a-z]+>/i
javascript
alert( "<body> ... </body>".match(/<[a-z]+>/gi) ); // <body>

The regexp looks for character '<' followed by one or more Latin letters, and then '>'.

  1. Improved: /<[a-z][a-z0-9]*>/i

According to the standard, HTML tag name may have a digit at any position except the first one, like <h1>.

javascript
alert( "<h1>Hi!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>

Regexp “opening or closing HTML-tag without attributes”: /<\/?[a-z][a-z0-9]*>/i

We added an optional slash /? near the beginning of the pattern. Had to escape it with a backslash, otherwise JavaScript would think it is the pattern end.

javascript
alert( "<h1>Hi!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>

To make a regexp more precise, we often need make it more complex

We can see one common rule in these examples: the more precise is the regular expression – the longer and more complex it is.

For instance, for HTML tags we could use a simpler regexp: <\w+>. But as HTML has stricter restrictions for a tag name, <[a-z][a-z0-9]*> is more reliable.

Can we use <\w+> or we need <[a-z][a-z0-9]*>?

In real life both variants are acceptable. Depends on how tolerant we can be to “extra” matches and whether it’s difficult or not to remove them from the result by other means.

Common mistakes

  • Skipping the small examples and then missing the exact rule that Quantifiers +, *, ? and {n} depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • Quantifiers +, *, ? and {n} gives you one more piece of the JavaScript mental model.
  • The examples in this lesson are the quickest way to check whether the rule is clear.
  • Revisit the key terms when you meet the same idea in later chapters.

Predict

Before running this quantifiers block, predict the eight output lines. It covers exact counts, ranges, open-ended ranges, +, ?, *, the difference between 0* and 0+, decimals, and opening/closing tag patterns.

javascript
Reveal explanation

{5} requires exactly five digits, {3,5} allows a range, and {3,} allows three or more. + is the common shorthand for one or more, so \d+ collects full digit groups from the phone number. ? makes u optional in colou?r. * allows zero or more zeroes, so it still matches 1; + requires at least one zero, so it does not. The tag pattern uses optional escaped slash \/? and a stricter tag-name shape.

Try it

Change \d0* to \d0{2} and predict the zero-more line. Then remove ? from <\/? and predict which tag disappears from tags.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Quantifiers +, *, ? and {n} in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Greedy and lazy quantifiers when you are ready for the next lesson.