JavaScript regular expressions play a crucial role in validating forms on web pages. We can utilize validation techniques to verify the presence of numbers within a string using a JavaScript function. Regular expressions in JavaScript are designed to match, search, test, and confirm the validity of strings.
Syntax
The subsequent syntax exclusively employs the digits contained within the string.
<script>
//only the number of the input string
var numberRegex = /^\d+$/;
//number in between the input string
var numberRegex = /^[0-9]+$/;
//number at the end of the input string
var numberRegex1 = /[0-9]+$/;
//number at the start of the input string
var numberRegex2 = /^[0-9]/;
</script>
Examples
The examples below illustrate various forms of input data that solely utilize number validation through JavaScript regular expressions.
Example 1
The subsequent illustration employs JavaScript to verify if a string consists solely of numeric characters. It allows for the input of digits exclusively, prohibiting any alphabetic characters.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript only Number Regex
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /^\d+$/;
// Validate numbers
var t1 = numberRegex.test('09926677022');
var t2 = numberRegex.test('HiiErr0011');
var t3 = numberRegex.test('11.0331');
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> HiiErr0011 : "+t2+" <br> 11.0331 : "+t3;
}
</script>
</body>
</html>
Output
The image provided illustrates the extraction of numeric values from the string utilizing JavaScript regular expressions.
Example 2
The subsequent example demonstrates the utilization of JavaScript to verify if a string consists solely of numeric characters. We can retrieve the value by employing the match method, which is used to evaluate regular expressions.
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript only Number Regex using Match Method
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /^\d+$/;
// Validate numbers
var val1 = '09926677022';
var val2 = 'HiiErr0011';
var val3 = '11.0331';
var t1 = val1.match(numberRegex);
var t2 = val2.match(numberRegex);
var t3 = val3.match(numberRegex);
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> HiiErr0011 : "+t2+" <br> 11.0331 : "+t3;
}
</script>
</body>
</html>
Output
The image below illustrates the extraction of numeric values from a string utilizing JavaScript regular expressions (regex).
Example 3
The subsequent example demonstrates how to utilize JavaScript to identify the sole numeric digit within a string. We can retrieve the value by employing the search method in conjunction with regular expressions.
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript-only Number Regex using Search Method
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /[1-4]/g;
// Validate numbers
var val1 = '09926677022';
var val2 = 'HiiErr0011';
var val3 = '11.0331';
var t1 = val1.search(numberRegex);
var t2 = val2.search(numberRegex);
var t3 = val3.search(numberRegex);
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> HiiErr0011 : "+t2+" <br> 11.0331 : "+t3;
}
</script>
</body>
</html>
Output
The image below illustrates the extraction of numerical values from the string using JavaScript regular expressions.
Example4
The example below demonstrates how to utilize JavaScript to identify the sole numeric character present in a string. By employing the exec method, we can retrieve the value through regular expression evaluation.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript only Number Regex using exec method
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /^\d+$/;
// Validate numbers
var t1 = numberRegex.exec('09926677022');
var t2 = numberRegex.exec('HiiErr0011');
var t3 = numberRegex.exec('11.0331');
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> HiiErr0011 : "+t2+" <br> 11.0331 : "+t3;
}
</script>
</body>
</html>
Output
The image below illustrates the sole numeric values present within the string, utilizing JavaScript regular expressions for extraction.
Example5
The subsequent example utilizes a set of digits to verify solely the numbers present within the string. The digits ranging from 6 to 9 within this set are incorporated into the regular expression to identify and match the corresponding value.
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript only Number Regex using Match Method
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /[6-9]/g;
// Validate numbers
var val1 = '09926677022';
var val2 = 'HiiErr0011';
var val3 = '11.0331';
var t1 = val1.match(numberRegex);
var t2 = val2.match(numberRegex);
var t3 = val3.match(numberRegex);
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> HiiErr0011 : "+t2+" <br> 11.0331 : "+t3;
}
</script>
</body>
</html>
Output
The image below illustrates the extraction of numeric values from the string utilizing JavaScript regular expressions (regex).
Example6
The subsequent example demonstrates the utilization of a collection of digits to verify solely the numeric characters within a string. The digits ranging from 0 to 9 are employed in the regular expression to identify and match the corresponding values. The initial regex targets numbers that fall within a specified range, the second regex focuses on numbers that appear at the end of a string, and the third regex is designed to capture numbers that are positioned at the beginning of a string.
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript only Number Regex with the number
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /^[0-9]+$/;
var numberRegex1 = /[0-9]+$/;
var numberRegex2 = /^[0-9]/;
// Validate numbers
var val1 = '09926677022';
var val2 = 'HiiErr0011';
var val3 = '11.0331';
var t1 = val1.match(numberRegex);
var t2 = val2.match(numberRegex1);
var t3 = val3.match(numberRegex2);
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> HiiErr0011 : "+t2+" <br> 11.0331 : "+t3;
}
</script>
</body>
</html>
Output
The image below illustrates how to extract solely the numeric values from a string utilizing JavaScript regular expressions.
Example7
The example presented below utilizes a collection of digits to verify solely the numeric characters within the string. The digits ranging from zero to nine are employed within the regular expression to correspond with the given value. Additionally, both decimal and binary numbers can be evaluated using the regex value in conjunction with the match and test functions.
<html>
<head>
<title>
JavaScript only Number Regex
</title>
</head>
<body>
<h3>
JavaScript only Number Regex with the number
</h3>
<h4> We can use the validation for the numbers in the string using the javascript function.
</h4>
<div id = "regex_information"></div>
<button onclick = "display();"> Click Here!</button>
<script>
function display() {
var numberRegex = /^(?:-(?:[1-9](?:\d{0,2}(?:,\d{3})+|\d*))|(?:0|(?:[1-9](?:\d{0,2}(?:,\d{3})+|\d*))))(?:.\d+|)$/;
var numberRegex1 = /(?:-(?:[1-9](?:\d{0,2}(?:,\d{3})+|\d*))|(?:0|(?:[1-9](?:\d{0,2}(?:,\d{3})+|\d*))))(?:.\d+|)/g;
// Validate numbers
var val1 = '09926677022';
var val2 = '88.2mmm11';
var val3 = '11.0331';
var val4 = '11.03mmm31';
var t1 = val1.match(numberRegex);
var t2 = val2.match(numberRegex1);
var t3 = numberRegex1.test(val3);
var t4 = numberRegex.test(val4);
var element_data = document.getElementById("regex_information");
element_data.innerHTML = "09926677022 : "+t1+"<br> 88.2mmm11 : "+t2+" <br> 11.0331 : "+t3+"<br> 11.03mmm31 : "+t4;
}
</script>
</body>
</html>
Output
The image below illustrates the extraction of numeric values from a string utilizing JavaScript's regular expressions.
Conclusion
The singular numerical regular expression employed to verify the input values on the HTML page. This regex is utilized within forms and various user interaction capabilities through JavaScript functions.