Regular expression to match numbers only in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn regular expressions to match numbers only in JavaScript.

Data is a core element in every webpage. We have to validate it as per the requirements. We often deal with the data and require correct input from the user. For example, the user can not put the letters inside the field to accept the phone number, or the input length should be ten numbers.

To validate the data in JavaScript, regular expression is used. We often need to filter the necessary data and extract the matched data. Here, we are going to match all the numbers from the data.

So, let us look at regular expressions to match numbers only in JavaScript.

Using the Regular Expression

We will use the regular expression to match numbers only from the data. The regular expression is just a pattern of characters with a meaning. This pattern checks the data and returns the checked one.

It is a combination of a pattern and a modifier. The Pattern consists of the characters or range of characters, and the modifier is like a method that gives certain characteristics to a pattern like Ignoring-case and a lot more.

We can use the match() method to return the data matched with the regular expression. Otherwise, a test() method returns a boolean value for whether the match is found or not in the data.

All the users can follow the syntax to use regular expressions to match numbers only in JavaScript

Syntax

//syntax of regular expressions
/pattern/modifier(s);

//Regular expression to match numbers only
var <Pattern> = /\d+/g ;
   OR
var <Pattern> = new RegExp('^[0-9]+$');
'<your string here>'.match( <Pattern> );

Follow the above syntax to match numbers only in JavaScript

Example 1

In the example, we have used a regular expression to match only numbers from the text. We have taken input from the user as a String of text. By using the match method, we have matched the regular expression and the string provided by the user. The return value will be only numbers extracted from the value given by the user.


<html>
<body>
   <h2> Using the <i> Regular expression </i> to match numbers only in JavaScript </h2>
   <label for="number"> Add a number: </label>
   <input type="text" id="number" name="Number" value="" />
   <button id="btn"> Submit </button>
   <div id="div"> </div>
   <script>
      document.getElementById("btn").addEventListener("click", func);
      var element = document.getElementById("div");
      function func() {
         var value = document.getElementById("number").value;
         var regexp = /\d/g;
         var para = document.createElement('p');
         para.innerHTML = "Numbers containing in the Text: " + value.match(regexp);
         element.appendChild(para);
      }
   </script>
</body>
</html>

In the above example, users can see that we have matched only numbers from a string using the regular expression and displayed the numbers on the screen.

Example 2

In the example below, we have used the input field to take the user's mobile number. The input field can take input like text as well as numbers. We are going to validate that the value provided by the user should not contain letters. The phone number does not contain letters. So, we are validating the data provided by the user.


<html>
<body>
   <h2> Using the <i> Regular expression </i> to match numbers only in JavaScript </h2>
   <div id="div">
      <label for="text"> Enter mobile number : </label>
      <input type="text" id="text" name="Text" value="" />
   </div>
   <button id="btn"> Submit </button>
   <script>
      document.getElementById("btn").addEventListener("click", func);
      var element = document.getElementById("div");
      function func() {
         var value = document.getElementById("text").value;
         var expression = new RegExp('^[0-9]+$');
         if (document.getElementById("para")) {
            document.getElementById("para").remove();
         }
         if (!expression.test(value)) {
            var para = document.createElement('span');
            para.innerHTML = " **Mobile number does not contain letters";
            para.style.color = "red";
            para.id = "para";
            element.appendChild(para);
         } else {
            var para = document.createElement('span');
            para.innerHTML = "**Currect input, you can proceed";
            para.style.color = "red";
            para.id = "para";
            element.appendChild(para);
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the regular expression to validate the user-provided data. We are accepting numbers only in the example.

In this tutorial, we have learned the regular expression to match numbers only in JavaScript.