Quantifiers in JavaScript Regular Expression

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:

Quantifier Meaning
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 an X-sequence of n
n{X,Y} used to match a sequence having at least X and Y numbers 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 a 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 or using a regular expression.

In the above example, from the following code snippet:

/s+/gi

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

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

If we replace the following statement from the above example:


with the statement given below:

let pattern = /s+/;

Then the output should be:

s

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 the above example, the first pattern, that is, ll*, finds strings containing l followed by zero, meaning one or more occurrences of l. Whereas in the second pattern, that is, lo*, it finds a 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 an 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 the above example, in the following JavaScript code snippet:

/\d{3}/g

d indicates 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 at least X and Y numbers 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 or 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 a 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 (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="codescracker"></p>

   <script>
      let myString = "JavaScript is Fun. Is not it?";
      let pattern = /is(?! Fun)/gi;
      document.getElementById("codescracker").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 an output.

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!