Home » Tutorial » Regular expressions in JavaScript

Quantifiers +, * and ?

Ilya Kantor

There are short quantifiers '+', '' and '?', which are used very widely.

Basically, they are convenient shortcuts for numeric quantifiers:

+
Means “One or more”, same as {1,}.
For example: \d+ finds a number of any length:
showMatch( "number 12345", /\d+/ )  // 12345

?
Means “Zero or one”, same as {0,1}. Makes a character optional.
For example: ou?nd finds ond in second and ound in secound. 

showMatch( "second", /secou?nd/ )  // "second"
showMatch( "secound", /secou?nd/ )  // "secound", both variants match

Means “Zero or more”, same as {0,}.
A character may repeat many times or not exist at all.

The example below finds a digit, followed by 0 or more zeroes.

showMatch( "100 10 1", /\d0*/g ) // 100, 10, 1

Compare this to ‘+’ (one or more):

showMatch( "100 10 1", /\d0+/g ) // 100, 10

Quantifiers are regexp basic building blocks, so more examples to follow.

A float number (with a dot inside): \d+\.\d+
showMatch( "Any number of digits: 123.45", /\d+\.\d+/ )  // 123.45

Opening HTML-tag without attributes: /<[a-z]+>/i

showMatch( "<BODY> ... </BODY>", /<[a-z]+>/gi )  // <BODY>

The regexp above matches a literal '<' followed by one or more letters finished by '>'. This is the pattern for an opening tag.

Opening HTML-tag (better): /<[a-z][a-z0-9]>/i
An HTML tag should may have a digit on any position except the first one. So, the first char is [a-z], followed by zero or more [a-z0-9]. 

showMatch( "
  ...    ", /<[a-z][a-z0-9]*>/gi )  // <H1>

Here we meet a dilemma which occurs very often. More precise regexp is more complex. In the case of HTML tags, for instance <\w+> may be a good choice.

Of course it matches non-tags like <_>, but it is much simpler than <[a-z][a-z0-9]*> and works well on real data.

Opening or closing HTML tag: /<\/?[a-z][a-z0-9]>/i
To match both opening and closing tags, an optional slash /? is added before the tag name. The slash is escaped for JavaScript interpreter. 

var re = /<\/?[a-z][a-z0-9]*>/gi

showMatch( "<BODY> ... </BODY>", re )  // <BODY>, </BODY>

Find numbers with decimal point, positive or negative.

var re = /* your regexp */

var str = "1.5 0 123 -7 -0.4"

alert(str.match(re))   // '1.5', '-0.4'

Open solution
Solution

An integer number is \d+. Let’s add a decimal part \.\d+ to it: \d+\.\d+.

Now let’s add an optional negation -? before the number: -?\d+\.\d+.

Finally, let’s test -?\d+\.\d+:

var re = /-?\d+\.\d+/g

var str = "1.5 0 123 -7 -0.4"

alert(str.match(re))   // '1.5', '-0.4'

Create a regexp to match numbers. It should find positive numbers: both integer and numbers with the decimal point:

var re = /* your regexp */

var str = "1.5 0 123"

alert(str.match(re))   // '1.5', '0', '123'

Open solution
Solution

An integer number is \d+.

A decimal part is \.\d+, and we can make it optional with '?'.

Finally, we have \d+(\.\d+)?:

var re = /\d+(\.\d+)?/g

var str = "1.5 0 123"

alert(str.match(re))   // '1.5', '0', '123'

Tutorial