Quantifiers in Regular Expression JavaScript

This post is published to provide information about quantifiers used in JavaScript regular expression.

The word quantifiers in JavaScript regular expression refers to the number of characters or expressions to match.

List of Quantifiers in JavaScript Regular Expression

Quantifiers that can be used while working with regular expression are:

n+ - used to match a string that contains one or more n
n* - used to match a string that contains zero, one, or more occurrences of n
n? - used to match a string containing zero or one occurrence of n
n{X} - used to match a string that contains X sequence of n
n{X,Y} - used to match a sequence having atleast X and Y number of digits
n{X,} - similar to n{X}, except it matches the complete number containing at least X number of digits
n$ - used to match whether specified string ends with n or not
^n - used to match if a specified string begins with n
?=n - used to match a string with the pattern: a specified string followed by n
?!n - used to check if a specified string is not followed by n

The n+ Quantifier

The n+ quantifier is used when we need to match a string that contains one or more n, where n refers to any character. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun. Is not it?";
      let pattern = /s+/gi;
      document.getElementById("xyz").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

Note: The match() method is used to match a string with/using a regular expression.

In above example, from the following code snippet:

/s+/gi

The g (stands for global) and i (stands for case-insensitive) are two modifiers or flags. The g is used to find all matches (all 's') in the string, whereas i is used to find matches without caring on the case (upper and lowercase) of the character.

Since there are three words which are JavaScript, is, and Is that contains s, therefore the character s printed on the output for three times.

If we replace the following statement from above example:

with the statement given below:

let pattern = /s+/;

Then the output should be:

And with following statement:

let pattern = /s+/g;

The output should be:

s,s

The n* Quantifier

The JavaScript n* quantifier is used when we need to match a string that contains zero, one, or more occurrences of n, where n refers to a character. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>

   <script>
      let myString = "Hellloooo Prooogrammer, Helloo Hello";
      let pattern = /o*/gi;
      document.getElementById("abc").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

Let me create another example that uses multiple character patterns that are ll and lo:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Matches with <b>ll*</b> = <b><span id="a"></span></b></p>
   <p>Matches with <b>lo*</b> = <b><span id="b"></span></b></p>

   <script>
      let myString = "Hellloooo Prooogrammer, Helloo Hello";
      let patternOne = /ll*/gi;
      let patternTwo = /lo*/gi;

      document.getElementById("a").innerHTML = myString.match(patternOne);
      document.getElementById("b").innerHTML = myString.match(patternTwo);
   </script>
   
</body>
</html>

Output

Matches with ll* =

Matches with lo* =

In above example, the first pattern, that is, ll* finds strings containing l followed by zero, one or more occurrences of l. Whereas in the second pattern, that is lo* finds string containing l followed by zero, one, or more o.

The n? Quantifier

The JavaScript n? quantifier is used when we need to match a string containing zero or one occurrence of n, where n refers to a character. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Matches with <b>j?</b> = <b><span id="a"></span></b></p>
   <p>Matches with <b>va?</b> = <b><span id="b"></span></b></p>

   <script>
      let myString = "JavaScript and Javaa are Fun to Learn.";
      let patternOne = /j?/gi;
      let patternTwo = /va?/gi;

      document.getElementById("a").innerHTML = myString.match(patternOne);
      document.getElementById("b").innerHTML = myString.match(patternTwo);
   </script>
   
</body>
</html>

Output

Matches with j? =

Matches with va? =

The n{X} Quantifier

The JavaScript n{X} quantifier is used when we need to match a string that contains X sequence of n, where X refers to a number. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="myPara"></p>

   <script>
      let myString = "10 or 100 or 200 or 300 or 5555";
      let pattern = /\d{3}/g;
      document.getElementById("myPara").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

In above example, in the following JavaScript code snippet:

/\d{3}/g

d indicates to a number, therefore d{3} matches a sequence having at least 3 digits.

The n{X,Y} Quantifier

Similar to n{X}, the n{X,Y} quantifier is used when we need to match a sequence having atleast X and Y number of digits. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="res"></p>

   <script>
      let myString = "10 or 100 or 200 or 300 or 5555";
      let pattern = /\d{2,3}/g;
      document.getElementById("res").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

The n{X,} Quantifier

Similar to n{X}, the n{X,} quantifier does the same job, except that, it gets/prints the complete number containing at least X number of digits. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="resPara"></p>

   <script>
      let myString = "10 or 100 or 200 or 300 or 5555";
      let pattern = /\d{3,}/g;
      document.getElementById("resPara").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

The n$ Quantifier

The JavaScript n$ quantifier is used when we need to match whether specified string ends with n or not, where n refers to a single or multiple character(s). For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="mp"></p>

   <script>
      let myString = "JavaScript is Fun";
      let pattern = /Fun$/;
      document.getElementById("mp").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

The ^n Quantifier

Unlike n$, the ^n quantifier is used when we need to match if a specified string begins with n. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="rs"></p>

   <script>
      let myString = "JavaScript is Fun";
      let pattern = /^J/;
      document.getElementById("rs").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

The ?=n Quantifier

The ?=n quantifier is used when we need to match a string with the pattern: a specified string followed by n (an another specified string). For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="mpr"></p>

   <script>
      let myString = "Today I feel encouraged!";
      let pattern = /I(?= feel)/;
      document.getElementById("mpr").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

The ?!n Quantifier

Unlike ?=n, the ?!n quantifier is used when we need to check if a specified string is not followed by n (another specified string). For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="fresherearth"></p>

   <script>
      let myString = "JavaScript is Fun. Is not it?";
      let pattern = /is(?! Fun)/gi;
      document.getElementById("fresherearth").innerHTML = myString.match(pattern);
   </script>
   
</body>
</html>

Output

Since there is one Is which is not followed by Fun. Therefore the above program has produced Is as output.

JavaScript Online Test

« Previous Tutorial Next Tutorial »