- JavaScript Basics
- JavaScript Tutorial
- JavaScript: where to write
- JavaScript: how to display
- JavaScript: keywords
- JavaScript: comments
- JavaScript: variables
- JavaScript: operators
- JavaScript: data types
- JavaScript Conditional Statements
- JavaScript: if-else
- JavaScript: switch
- JavaScript: for loop
- JavaScript: while loop
- JavaScript: do-while loop
- JavaScript: break and continue
- JavaScript Popup Boxes
- JavaScript: alert box
- JavaScript: confirm box
- JavaScript: prompt box
- JavaScript Popular Topics
- JavaScript: functions
- JavaScript: innerHTML
- JavaScript: getElementById()
- JavaScript: getElementsByClassName()
- JavaScript: getElementsByName()
- JavaScript: getElementsByTagName()
- JavaScript: querySelector()
- JavaScript: querySelectorAll()
- JavaScript: document.write()
- JavaScript: console.log()
- JavaScript: boolean
- JavaScript: events
- JavaScript: Math object
- JavaScript: Math.random()
- JavaScript: Number()
- JavaScript: parseInt()
- JavaScript: parseFloat()
- JavaScript Arrays
- JavaScript: array
- JavaScript: find length of array
- JavaScript: add element at beginning
- JavaScript: add element at end
- JavaScript: remove first element
- JavaScript: remove last element
- JavaScript: get first index
- JavaScript: get last index
- JavaScript: reverse an array
- JavaScript: sort an array
- JavaScript: concatenate arrays
- JavaScript: join()
- JavaScript: toString()
- JavaScript: from()
- JavaScript: check if value exists
- JavaScript: check if array
- JavaScript: slice an array
- JavaScript: splice()
- JavaScript: find()
- JavaScript: findIndex()
- JavaScript: entries()
- JavaScript: every()
- JavaScript: fill()
- JavaScript: filter()
- JavaScript: forEach()
- JavaScript: map()
- JavaScript Strings
- JavaScript: string
- JavaScript: length of string
- JavaScript: convert to lowercase
- JavaScript: convert to uppercase
- JavaScript: string concatenation
- JavaScript: search()
- JavaScript: indexOf()
- JavaScript: search() vs. indexOf()
- JavaScript: match()
- JavaScript: match() vs. search()
- JavaScript: replace()
- JavaScript: toString()
- JavaScript: String()
- JavaScript: includes()
- JavaScript: substr()
- JavaScript: slice string
- JavaScript: charAt()
- JavaScript: repeat()
- JavaScript: split()
- JavaScript: charCodeAt()
- JavaScript: fromCharCode()
- JavaScript: startsWith()
- JavaScript: endsWith()
- JavaScript: trim()
- JavaScript: lastIndexOf()
- JavaScript Date and Time
- JavaScript: date and time
- JavaScript: Date()
- JavaScript: getFullYear()
- JavaScript: getMonth()
- JavaScript: getDate()
- JavaScript: getDay()
- JavaScript: getHours()
- JavaScript: getMinutes()
- JavaScript: getSeconds()
- JavaScript: getMilliseconds()
- JavaScript: getTime()
- JavaScript: getUTCFullYear()
- JavaScript: getUTCMonth()
- JavaScript: getUTCDate()
- JavaScript: getUTCDay()
- JavaScript: getUTCHours()
- JavaScript: getUTCMinutes()
- JavaScript: getUTCSeconds()
- JavaScript: getUTCMilliseconds()
- JavaScript: toDateString()
- JavaScript: toLocaleDateString()
- JavaScript: toLocaleTimeString()
- JavaScript: toLocaleString()
- JavaScript: toUTCString()
- JavaScript: getTimezoneOffset()
- JavaScript: toISOString()
- JavaScript Regular Expression
- JavaScript: regular expression
- JavaScript: RegEx . (dot)
- JavaScript: RegEx \w and \W
- JavaScript: RegEx \d and \D
- JavaScript: RegEx \s and \S
- JavaScript: RegEx \b and \B
- JavaScript: RegEx \0
- JavaScript: RegEx \n
- JavaScript: RegEx \xxx
- JavaScript: RegEx \xdd
- JavaScript: RegEx quantifiers
- JavaScript: RegEx test()
- JavaScript: RegEx lastIndex
- JavaScript: RegEx source
- JavaScript Programs
- JavaScript Programs
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:
<!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>
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:
And with following statement:
let pattern = /s+/g;
The output should be:
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:
<!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>
Let me create another example that uses multiple character patterns that are ll and lo:
<!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>
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:
<!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>
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:
<!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>
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:
<!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>
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:
<!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>
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:
<!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>
The ^n quantifier
Unlike n$, the ^n quantifier is used when we need to match if a specified string begins with n. For example:
<!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>
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:
<!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>
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:
<!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>
Since there is one Is which is not followed by Fun. Therefore, the above program has produced Is as an output.
« Previous Tutorial Next Tutorial »