Javascript check if string contains only numbers

Javascript check if string contains only numbers

It is common in javaScript to find ourselves with the problem of knowing if a string of characters represents a number, either integer or decimal. The resolution of this problem in this article is based on the combination of the use of a regular expression together with the necessary javaScript algorithm whether or not to validate the string as numeric input.

Regular phrase:

The regular expression we use is / ^ [0-9] + $ /  and with it what we try to know is if the string we are trying to validate contains only exclusively numeric characters. If we analyze this expression we obtain that the expression is delimited by the character '/' both at the beginning and at the end. It is important to know that other alternatives can be used as delimiters such as ( ), {}, [], <>, or # for both the start and end delimiters, example: # ^ [0-9] + $ #

Beyond the delimiter we find the expression itself that begins with the caret '^' and whose meaning, in this case, is the beginning of the string. The expression ends with '$' which means the end of the string. Next and after the fiveflejo we find a class of characters, in brackets. It means, therefore, [0-9], that characters from 0 to 9 are accepted and finally we find the sign + whose meaning is that the above must be present at least once.

Therefore, and speaking in general of regular expressions, / ^ [0-9] + $ /  means that the string that has from the beginning to the end (the length does not matter) characters between 0 and 9 will be valid and that at less there is 1.
If there is no string (empty) it will not be valid and obviously the existence of a letter or special character will not be true or valid either.

Given this, and in combination with javaScript, we can evaluate any string of characters to know if it corresponds to the existence of only numbers starting from a character.

   var data_to_check = "1234";

   var acceptedValues = / ^ [0-9] + $ /;
   if (data.match (acceptedValues)) {
      alert ("It is numeric");
   } else {
     alert ("It is not numeric");
  }

From the perspective of our original problem, not only is a whole number numeric but also a fractional number, with decimals. To solve this problem using the script above, and in the case of having two numerical parts separated by a period, we are forced to do a double check.

Check if a string with point and decimals represents a number:

The problem lies in being able to check in javaScript if a character string of type '35 .34 'that is of type text, since the input will be made from the keyboard with the tag, can be validated as numeric. For this, the procedure that we will follow is as follows:

• Find the decimal point in the string. If it does not exist, it can be a whole number, so it will have to be evaluated anyway.
• If there is a decimal point, a separation of both parts is performed, excluding the decimal point itself to evaluate them separately.
• Create a function called isNumber (data) that returns true or false.

Look at the following complete application:

<! DOCTYPE html>

<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Validate with input in javaScript </title>
<style>
    #container {
        width: 50%;
        padding: 20px;
        border: 2px solid black;
        background-color: #fafafa;
        margin: auto;
    }
</style>
<script>
    function validate () {
        data = document.getElementById ("data"). value;
        result = document.getElementById ("result");
        if (data == "") {
            result.innerText = "There is no character string to evaluate";
        } else {
            if (isNumber (data)) {
                result.innerText = ("The character string is NUMERIC:" + parseFloat (data) .toFixed (2));
            } else {
                result.innerText = ("The character string is NOT NUMERIC");
            }
        }
    }
    function isNumber (data) {
        / * Definition of accepted values * /
        var acceptedValues = / ^ [0-9] + $ /;
        if (data.indexOf (".") === -1) {
            if (data.match (acceptedValues)) {
               return true;
            } else {
               return false;
            }
        } else {
            // divide the expression by the point in an array
            var partition = data.split (".");
            // we evaluate the first part of the division (integer part)
            if (partition [0] .match (AcceptedValues) || partition [0] == "") {
                if (partition [1] .match (acceptedValues)) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        }
    }
    function historyBack () {
        window.history.back ();
    }
</script>

<div id = "container">
        <label for = ""> Expression to validate </label>
        <input type = "text" id = "data" size = "10" value = "">
        <p>
            <button id = "button" onclick = "validate ()"> Evaluate </button>
        </p>
        <p id = "result"> Result </p>
        <input type = "button" id = "button" value = "Return to the previous page" onclick = "historyBack ()" />
</div>

Hope it will help you somehow!