Javascript Regular Expression for numbers

Question

I am trying to make a HTML form that accepts a rating through an input field from the user. The rating is to be a number from 0-10, and I want it to allow up to two decimal places. I am trying to use regular expression, with the following

function isRatingGood()
{
    var rating = document.getElementById("rating").value;
    var ratingpattern = new RegExp("^[0-9](\.[0-9][0-9]?)?$");

    if(ratingpattern.test(rating))
    {
        alert("Rating Successfully Inputted");
        return true;
    }
    else
    {
        return rating === "10" || rating === "10.0" || rating === "10.00";
    }
}

However, when I enter any 4 or 3 digit number into the field, it still works. It outputs the alert, so I know it is the regular expression that is failing. 5 digit numbers do not work. I used this previous answer as a basis, but it is not working properly for me.

My current understanding is that the beginning of the expression should be a digit, then optionally, a decimal place followed by 1 or 2 digits should be accepted.

Answer 1

You are using a string literal to created the regex. Inside a string literal, \ is the escape character. The string literal

"^[0-9](\.[0-9][0-9]?)?$"

produces the value (and regex):

^[0-9](.[0-9][0-9]?)?$

(you can verify that by entering the string literal in your browser's console)

\. is not valid escape sequence in a string literal, hence the backslash is ignored. Here is similar example:

> "foo\:bar"
"foo:bar"

So you can see above, the . is not escaped in the regex, hence it keeps its special meaning and matches any character. Either escape the backslash in the string literal to create a literal \:

> "^[0-9](\\.[0-9][0-9]?)?$"
"^[0-9](\.[0-9][0-9]?)?$"

or use a regex literal:

/^[0-9](\.[0-9][0-9]?)?$/

Answer 2

The regular expression you're using will parsed to

/^[0-9](.[0-9][0-9]?)?$/

Here . will match any character except newline.

To make it match the . literal, you need to add an extra \ for escaping the \.

var ratingpattern = new RegExp("^[0-9](\\.[0-9][0-9]?)?$");

Or, you can simply use

var ratingPattern = /^[0-9](\.[0-9][0-9]?)?$/;

You can also use \d instead of the class [0-9].

var ratingPattern = /^\d(\.\d{1,2})?$/;

Demo

var ratingpattern = new RegExp("^[0-9](\\.[0-9][0-9]?)?$");

function isRatingGood() {
  var rating = document.getElementById("rating").value;

  if (ratingpattern.test(rating)) {
    alert("Rating Successfully Inputted");
    return true;
  } else {
    return rating === "10" || rating === "10.0" || rating === "10.00";
  }
}

<input type="text" id="rating" />

<button onclick="isRatingGood()">Check</button>

Answer 3

Below find a regex candidate for your task:

^[0-1]?\d(\.\d{0,2})?$

Demo with explanation

var list = ['03.003', '05.05', '9.01', '10', '10.05', '100', '1', '2.', '2.12'];
var regex = /^[0-1]?\d(\.\d{0,2})?$/;

for (var index in list) {
  var str = list[index];
  var match = regex.test(str);
  console.log(str + ' : ' + match);
}

Answer 4

This should also do the job. You don't need to escape dots from inside the square brackets:

^((10|\d{1})|\d{1}[.]\d{1,2})$

Also if you want have max rating 10 use

10| ---- accept 10

\d{1})| ---- accept whole numbers from 0-9 replace \d with [1-9]{1} if don't want 0 in this

\d{1}[.]\d{1,2} ---- accept number with two or one numbers after the coma from 0 to 9

LIVE DEMO: https://regex101.com/r/hY5tG4/7

Any character except ^-]\ All characters except the listed special characters are literal characters that add themselves to the character class. [abc] matches a, b or c literal characters

Answer 5

Just answered this myself.

Need to add square brackets to the decimal point, so the regular expression looks like

var ratingpattern = new RegExp("^[0-9]([\.][0-9][0-9]?)?$");