In JavaScript, the "$" quantifier is employed in regular expressions to target a specific input character located at the end of a string. This quantifier is utilized to extract the value specifically at the conclusion of input data through various methods. The modifier combines the use of the regexp method with the quantifier to perform operations such as replacement, searching, and matching of data.
Syntax
The syntax below utilizes the "$" quantifier in a regular expression to match characters that are not available.
/value$/
New RegExp(value$);
/value$/modifier;
Explanation
The regex quantifier is compatible with the global, multiline, and case-insensitive modifiers.
At the end of the string, the character input is denoted by the term "value".
Supported browsers
The given browsers support the javascript regular expression "$" quantifier.
- Edge
- Firefox
- Google Chrome
- Internet Explorer
- Opera
- Safari
Examples
The examples below demonstrate the utilization of various techniques, parameters, and adjustments with regular expressions and the $ quantifier in JavaScript.
Example1
In this example, the match method is employed with varying regex quantifier values. The initial value results in a null output, whereas the subsequent value displays the available value located at the end of the string.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp $ quantifier
</h3>
<h4> The regex $ quantifier operates with the match method
</h4>
<div id="regex_quantifier"></div>
<div id="regex_quantifier2"></div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the end string
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /java$/g;
var quant_alter1 = quant_q1.match(quantifier_pattern);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
//available character at the end string
let quantifier_pattern2 = /website$/g;
var quant_alter2 = quant_q1.match(quantifier_pattern2);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "Available website character: " + quant_alter2;
}
</script>
</body>
</html>
Output
The result displays the characters that are present in the string.
Example2
In this example, the search method is demonstrated with different regex quantifier values. The initial value results in an output of "-1", while the subsequent value indicates the position of the characters.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp $ quantifier
</h3>
<h4> The regex $ quantifier operates with the search method
</h4>
<div id="regex_quantifier"></div>
<div id="regex_quantifier2"></div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the end string
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /do$/g;
var quant_alter1 = quant_q1.search(quantifier_pattern);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
//available character at the end string
let quantifier_pattern2 = /site$/g;
var quant_alter2 = quant_q1.search(quantifier_pattern2);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "Available website character: " + quant_alter2;
}
</script>
</body>
</html>
Output
The result displays the position at which the input string is located.
Example3
In this example, the test method is applied with different regex quantifier values. The initial value results in an output of "false", while the subsequent value yields an output of "true".
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp $ quantifier
</h3>
<h4> The regex $ quantifier operates with the test method
</h4>
<div id="regex_quantifier"></div>
<div id="regex_quantifier2"></div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the end string
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /do$/g;
var quant_alter1 = quantifier_pattern.test(quant_q1);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
//available character at the end string
let quantifier_pattern2 = /site$/g;
var quant_alter2 = quantifier_pattern2.test(quant_q1);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "Available website character: " + quant_alter2;
}
</script>
</body>
</html>
Output
The result demonstrates the Boolean representation of the provided string input.
Example4
In this instance, the replace method is demonstrated by substituting a specified value for the regex quantifier. It is possible to substitute the value with a regex pattern and a fresh term for the regular expression.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp $ quantifier
</h3>
<h4> The regex $ quantifier operates with the replace method
</h4>
<p> input: is java and javascript language learn from Example website</p>
<div id="regex_quantifier"></div>
<div id="regex_quantifier2"></div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//available character at the end string with regex pattern
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /website$/g;
let replace_val = "online tutorial"
var quant_alter1 = quant_q1.replace(quantifier_pattern, replace_val);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "replace: <b>" + quant_alter1 + "</b>";
//Remove end string with new regexp syntax
let quantifier_pattern2 = new RegExp("website$", "g");
let replace_val1 = "";
var quant_alter2 = quant_q1.replace(quantifier_pattern2, replace_val1);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "remove: <b>" + quant_alter2 + "</b>";
}
</script>
</body>
</html>
Output
The result displays the substituted content of the provided string.
Example5
In this example, the search method is demonstrated with the global and case-insensitive modifiers applied to the regex quantifier. By observing the string, we can distinguish the effects of each modifier.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp $ quantifier
</h3>
<h4>
The regex $ quantifier operates with the match method using the global and case-insensitive modifier.
</h4>
<div id="regex_quantifier">
</div>
<div id="regex_quantifier2">
</div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
// Available character at the global modifier
var quant_q1 = "is java and javascript language learn from C# Tutorial WEBSITE";
let quantifier_pattern = / website$/g;
var quant_alter1 = quant_q1.search(quantifier_pattern);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
// Available character at the global and case-insensitive modifier
let quantifier_pattern2 = /website$/gi;
var quant_alter2 = quant_q1.search(quantifier_pattern2);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "Available website character: " + quant_alter2;
}
</script>
</body>
</html>
Output
The result displays the characters that are present in the string.
Example6
In this example, the match method is employed with varying start and end characters for the regex quantifier to demonstrate capturing values within a string.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp ^ and $ quantifier
</h3>
<h4> The regex $ quantifier operates with the match method
</h4>
<div id="regex_quantifier"></div>
<div id="regex_quantifier2"></div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the end string
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /^java+$/g;
var quant_alter1 = quant_q1.match(quantifier_pattern);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
//available character at the end string
let quantifier_pattern2 = /website+$/g;
var quant_alter2 = quant_q1.match(quantifier_pattern2);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "Available website character: " + quant_alter2;
}
</script>
</body>
</html>
Output
The result displays the characters that are present in the string.
Example7
In this instance, the search method is demonstrated with different regex quantifier values. One option is to combine the $ quantifier with the + quantifier.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp quantifier
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp $ quantifier
</h3>
<h4> The regex $ quantifier operates with the search method
</h4>
<div id="regex_quantifier"></div>
<div id="regex_quantifier2"></div>
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the end string
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /^ learn$/g;
var quant_alter1 = quant_q1.search(quantifier_pattern);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
//available character at the end string
let quantifier_pattern2 = /website +$/gi;
var quant_alter2 = quant_q1.search(quantifier_pattern2);
var quant_ele2 = document.getElementById("regex_quantifier2");
quant_ele2.innerHTML = "Available website character: " + quant_alter2;
}
</script>
</body>
</html>
Output
The result displays the position at which the input string can be found.
Conclusion
The JavaScript character "$" combined with a modifier allows for extracting input characters through regular expressions.