JavaScript Regex Quantifiers in Under 10 Minutes? Seriously?

Codeguage
JavaScript in Plain English
4 min readApr 16, 2021

--

Six different quantifiers to explore in regex.

Introduction

Regular expressions are fairly monotonous and tiring without the use of a special concept known as quantifiers.

Quantifiers serve to replicate a pattern a given number of times.

If you were ever asked to match the character 'a' occurring 100 times continuously, in a test string, will you construct an expression with literally 100 a's, or something more efficient?

In this chapter, we will discover quantifiers in great detail and see tons of examples on the topic. So, let’s not waste any more time and begin right away.

What are quantifiers?

As the name suggests, quantifiers are special characters that serve to quantify a given pattern. By ‘quantify’ we mean that the pattern is replicated a certain number of times.

More specifically, quantifiers don’t just quantify some given pattern, but instead, the pattern immediately preceding them.

Therefore where we need to match a pattern appearing contiguously for n number of times, we can use quantifiers, instead of manually retyping the pattern that many times.

Take the example of the quantifier +. It takes its preceding pattern and quantifies it for one or more number of times.

What this means is that the expression /a+/ will match the strings 'a', 'aa', 'aaa' and so on, since the pattern preceding +, which is a, will be looked for one or more number of times in the test string.

Similarly /ca+t/ will match the strings 'cat', 'caat', 'caaat', 'caaaat', and so on. The expression will look for a c followed by a, one or more number of times, and then finally t.

In both of these expressions, we say that a has been quantified by the + quantifier whose range is from 1 to infinity (we will see how ranges work just in a short while below).

Regular expressions come equipped with far more quantifiers than just the + quantifier. A complete list is given below. We'll work with each and every quantifier shown here in the examples that follow.

* — zero or more

The * quantifier looks for its preceding pattern zero or more times.

Unlike +, it matches even those substrings where the preceding expression never appears. It has the range 0-∞.

For example, /ca*t/ matches the strings 'ct', 'cat', 'caat', 'caaat' and so on. Notice the first match here i.e. 'ct' — it has zero occurrences of the character a and will only match the expression/ca*t/, but NOT /ca+t/.

This is simply because + needs at least one occurrence of its preceding pattern whereas * needs at least none of it.

+ — one or more

The + quantifier looks for its preceding pattern one or more times.

It has the range 1-∞.

For example /se+/ matches the strings 'se', 'see', 'seee', 'seeee' and so on. However /se+/ won’t match the string 's' since there is no e in there.

? — zero or one

The + quantifier looks for its preceding pattern for zero or one occurrence. This means it has the range 0–1.

The expression /ca?t/ will hence only match the strings 'ct' and 'cat', with zero and one occurrence of 'a' in the test strings, respectively.

Custom ranges

Besides these predefined ranges of the quantifiers +, * and ?, in regular expressions, we also get the chance to create custom quantifiers.

They are given by curly braces {} and at least one number.

Here’s how custom quantifiers work:

If we specify only a single value inside the braces, such as {5}, then the quantifier looks for the preceding pattern for exactly that number of times in the test string. For instance /c{2}t/ will only match the substring 'caat' with exactly 2 occurrences of a— nothing else.

On the other hand, if we specify two numbers inside the braces separated by a comma, as in {1,2}, the quantifier looks for the preceding pattern within the given quantification range. For instance /ca{1,3}t/ will match the substrings 'cat', 'caat' and 'caaat' — nothing else.

Omitting the ending value after the comma, like in {0,} makes an open-range quantifier i.e. it starts at the given number and then goes all the way to infinity. For instance, /ca{3,}t/ will match the substrings 'caaat', 'caaaat', and 'caaaaat' with at least 3 occurrences of a— nothing else.

This is it folks!

And essentially, this is all about quantifiers in regular expressions in JavaScript.

As you might appreciate from this article, the strength of regular expressions lies in the concept of quantification. Without it, we aren’t in much control over matching complex patterns where stuff could repeat any number of times.

Let’s end this article with a simple task for you. The solution can be found at https://www.codeguage.com/courses/regexp/quantifiers.

Write an expression to find the following sequence in a string:

'1' (occurring one or more times), followed by '0' (occurring 3 or more times) and finally '2' (occurring exactly 3 times).

--

--