In JavaScript, the "^" quantifier in regular expressions is employed to match input characters at the beginning of a string. This quantifier specifically targets values at the start of the input data through various methods. It collaborates with the regexp method and other quantifiers to facilitate operations such as replacement, searching, and data matching.
Syntax
This syntax utilizes the "^" quantifier in regular expressions to match characters that are not available.
/^value/
New RegExp(^value);
/^value/modifier;
Explanation
The global, multiline, and case-insensitive flags are compatible with the beginning character quantifier. In this context, the term "value" denotes the character that appears at the beginning of a string.
Supported browsers
The given browsers operate for the javascript regular expression's "^" quantifier.
- Edge
- Firefox
- Google Chrome
- Internet Explorer
- Opera
- Safari
Examples
Various techniques, values, and adjustments are demonstrated in the examples when working with the "^" quantifier in JavaScript regular expressions.
Example1
In this example, the match method is demonstrated with various values for the regex quantifier. The initial value results in a null output, whereas the subsequent value displays the existing value at the beginning 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>
<!-- Click the button to get the quantifier output -->
<button onclick="quant_click();"> Click Here!</button>
</div>
<script>
function quant_click() {
//not available character at the start of the 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 start of the string
let quantifier_pattern2 = /^is/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 at the beginning of the string.
Example 2
In this illustration, the match method is applied to a regex quantifier with the global and case-insensitive modifiers. By examining a string, we can observe the distinctions between these two modifiers.
<!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>
<!-- Click the button to get the quantifier output -->
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
var quant_q1 = "IS java and javascript language learn from C# Tutorial WEBSITE";
// use regex available at the start position
let quantifier_pattern = /^is/g;
var quant_alter1 = quant_q1.match(quantifier_pattern);
var quant_ele = document.getElementById("regex_quantifier");
quant_ele.innerHTML = "Available java character: " + quant_alter1;
// use regex with global and case-insensitive modifier
let quantifier_pattern2 = /^is/gi;
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 displayed indicates the characters that are present at the beginning of the string.
Example 3
In this demonstration, the quantifier and search function are employed 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>
<!-- Click the button to get the quantifier output -->
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the start character of the string
var quant_q1 = "is java and javascript language learn from Example website";
let quantifier_pattern = /^java/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 start of the string
let quantifier_pattern2 = /^is/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 starting position of the input string that is currently accessible.
Example 4
In the demonstration, the quantifier and test method are applied with different values for the regex quantifier. The initial value results in an output of "false", while the subsequent regular expression 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 javascript regex "^" quantifier operates with the test method
</h4>
<div id="regex_quantifier"> </div>
<div id="regex_quantifier2"> </div>
<!-- Click the button to get the quantifier output -->
<button onclick="quant_click();"> Click Here! </button>
</div>
<script>
function quant_click() {
//not available character at the start string
var quant_q1 = "java and javascript language learn from Example website";
let quantifier_pattern = /^java/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 start string
let quantifier_pattern2 = /^java/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 displays the Boolean value of the initial input string.
Example 5
In this instance, the example demonstrates the utilization of the quantifier in conjunction with the replace method to substitute the specified value for the regular expression quantifier. This enables us to either replace or eliminate values based on a designated pattern and a new keyword within the realm of regular expressions.
<!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>
<!-- Click the button to get the quantifier output -->
<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 = /^is/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("^is", "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 displayed indicates the substituted value of the initial characters.
Conclusion
The "^" quantifier in JavaScript functions with a modifier to match the initial character of the input string when utilizing regular expressions.