Quantifiers +, *, ? and {n}

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 pattern:\d. To mark how many we need, we can append a quantifier.

Quantity {n}

The exact count: pattern:{5}

pattern:\d{5} denotes exactly 5 digits, the same as pattern:\d\d\d\d\d. The example below looks for a 5-digit number:


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

We can add \b to exclude longer numbers: pattern:\b\d{5}\b. The range: pattern:{3,5}, match 3-5 times

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

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

We can omit the upper limit. Then a regexp pattern:\d{3,} looks for sequences of digits of length 3 or more:

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 pattern:\d{1,}:

Shorthands

There are shorthands for most used quantifiers: pattern:+

Means “one or more”, the same as pattern:{1,}. For instance, pattern:\d+ looks for numbers:

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

pattern:?

Means “zero or one”, the same as pattern:{0,1}. In other words, it makes the symbol optional. For instance, the pattern pattern:ou?r looks for match:o followed by zero or one match:u, and then match:r. So, pattern:colou?r finds both match:color and match:colour:

let str = "Should I write color or colour?";
alert( str.match(/colou?r/g) ); // color, colour

pattern:*

Means “zero or more”, the same as pattern:{0,}. That is, the character may repeat any times or be absent. For example, pattern:\d0* looks for a digit followed by any number of zeroes (may be many or none):

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

Compare it with pattern:+ (one or more):

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): pattern:\d+.\d+ In action: Regexp for an “opening HTML-tag without attributes”, such as or

The simplest one: pattern:/<[a-z]+>/i

alert( "<body> ... </body>".match(/<[a-z]+>/gi) ); // <body>

The regexp looks for character pattern:‘<’ followed by one or more Latin letters, and then pattern:‘>’. 2. Improved: pattern:/<[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

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

*Regexp “opening or closing HTML-tag without attributes”: pattern:/<\/?[a-z][a-z0-9]>/i** We added an optional slash pattern:/? near the beginning of the pattern. Had to escape it with a backslash, otherwise JavaScript would think it is the pattern end.

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

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

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

Example:

Follow the lesson from Microsoft Web-Dev-For-Beginners course

Tags: web,development

Back to web-development-basics Back to Home