Regex Quantifiers +, *, ? and {} in Javascript

Let’s get started first using {} quantifier.

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:

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

Shorthands

Most often needed quantifiers have shorthands:

+ Means “one or more” the same as {1,}, this pattern will be searched in a string. Here, the “more” means which are together but not separated those will be count as a pattern matched.

For instance, \d+ looks for numbers:

var str = "+(880)-173-0910-539";

console.log( str.match(/\d+/g) ); // 880,173,910,539

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

The example below looks for a digit followed by any number of zeroes:

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

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

console.log( "100 10 1".match(/\d0+/g) ); // 100, 10

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

So it can find or in the word color and our in colour:

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

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

More Examples

Example using ? quantifier:

var str = "I’ve got a couple of cars in my house";

var regexp = /cars?/g;

var result = str.match(regexp);

console.log(result);

Output: ["cars"]

If we change the string like so "I’ve got a car in my house" then result will remain the same as found ["car"].

So we can see in the regular expression s is an optional character.

We can also change the string like as "I’ve got a cas in my house" and also change the regular expression as follows:

/car?s/g;

Then result will remain the same as found ["cas"]. Here, r is an optional character.

There is no available option for c, a and s if we use r? in the expression.

Example using + quantifier:

var str = "Today is 23rd Feb.";

var regexp = /\d+r?d?/g;

var result = str.match(regexp);

console.log(result);

Output: ["23rd"]

If we change the string like so "Today is 23d Feb." then result will remain the same as found ["23d"].

Even if we change like so "Today is 23 Feb." the result will remain as well like ["23"]

Let’s see another example:

var str = "Today";

var regexp = /\S/g; //any string is \S

var result = str.match(regexp);

console.log(result);

Output: ["T", "o", "d", "a", "y"]

“In above result, we can see by default the regular expression assumes every single character is a string.”

Now we change the expression as /\S+/g

Then the result will be evaluated as ["Today"] and only one element.

So we can see in the regular expression \S is repeating more times using “+” until the string is finished and evaluating a group of string or a brand new string unlike a word.

Example using * quantifier:

var str = "Today";

var regexp = /\S*/g;

var result = str.match(regexp);

console.log(result);

Output: ["Today", ""]

We can see there is an extra empty string value and that is evaluated as found.

Basically n+ and n* are same but a little bit difference is as follows:

* - Matches an Expression 0 OR More Times.

+ - Matches an Expression 1 OR More Times

Let’s see another example:

If we change the string like as var str = ""; and regular expression as /\S*/g

It has been evaluated as found like [“”] although the string was zero length.

But if we use the expression as /\S+/g

Then the result will be evaluated as null.

Example using {} quantifier:

var str = "AAAABBBBCCCCDDDD";

var regexp = /A/g;

var result = str.match(regexp);

console.log(result);

Output: ["A", "A", "A", "A"]

But we want only 3 times and then the result would be as follows:

var regexp = /A{3}/g;

Output: ["AAA"]

We can see the above expression a kind of range.

Now we change the string as str = "AAAABBBBAAAACCCCDDDD";

Output: ["AAA","AAA"]

Now at least 3 times:

var regexp = /A{3,}/g;

Output: ["AAAA", "AAAA"]

As we can see not exact 3 times but at least 3 times.

And now at least 3 but not more than 5 times:

var regexp = /A{3,5}/g;

And change the string as well as follows:

str = "AAAAAABBBBAAAAAACCCCDDDD";

Output: ["AAAAA", "AAAAA"]

As we can see minimum 3 and at most 5 times.

Problem 01: Find as ["yellow,", "green,", "red"] from "yellow, green, red"

Ans: /[\s]/

Let’s try as follows:

var colors = "yellow, green, red";

var patt1 = /[\s]/g;

var result = colors.split(patt1);

console.log(result);

Problem 02: Find as ["yellow", "", "green", "", "red"] from "yellow, green, red"

Ans: /[,\s]/

Let’s try as follows:

var colors = "yellow, green, red";

var patt1 = /[,\s]/g;

var result = colors.split(patt1);

console.log(result);

Problem 03: Find as ["yellow", "green", "red"] from "yellow, green, red"

Ans: /[,\s]+/

Let’s try as follows:

var colors = "yellow, green, red";

var patt1 = /[,\s]+/g; //For all characters /\S/ and specific characters /[]/ and whitespace /\s/

var result = colors.split(patt1);

console.log(result);

 

  • 249
  • 308
  • By Bablu Ahmed
  • Posted 1 year ago