RegEx doesn´t work with Replace JavaScript Method

Question

I need some help with Regular Expression, the problem is that I need apply the regex with Replace method in JavaScript. I saw a few post here in Stackoverflow but any regex doesn't works, I don't why.

I need that the user only can type in the input the following data:

100
100.2
100.23

Note: only number, it could be with one or two decimals maximum. Don't allow another symbols, and of course one comma.

I have been reading about it, and I used a few regex generator to see the match, so I made this one:

/^[a-zA-Z]+(\.[a-zA-Z]{0,2})?$/

I got a little bit confused at the beginning because I used in the replace method:

elementOne.addEventListener("input", function(event) {
   this.value = this.value.replace(/^[a-zA-Z]+(\.[a-zA-Z]{0,2})?$/, '');
});

And right now I read the process like: if I type a letter from a to z,the method will replace to space ''. but the rest doesn't works in the method but works in the generator for example.

Here is an example, you will see in the first input my regex vs Sven.hig regex:

 const elementOne = document.getElementById('elementOne'); const elementTwo = document.getElementById('elementTwo'); elementOne.addEventListener("input", function(event) { this.value = this.value.replace(/^[a-zA-Z]+(\.[a-zA-Z]{0,2})?$/, ''); }); elementTwo.addEventListener("input", function(event) { this.value = this.value.replace(/^\d+[,]?\d{0,2}/, ''); });

 <p>Element One (My RegEx)</p> <input id="elementOne" type="text" /> <p>Element Two (Stack RegEx)</p> <input id="elementTwo" type="text" />

Also as a CodePen

Answer 1

Your regex is to match words not numbers you should replace [a-zA-Z] by [0-9] and the \. by \,

so your regex should look like this /^[0-9]+(\,[0-9]{0,2})?/

alternatively you could shorten the pattern /^\d+[,]?\d{0,2}/gm

here is code snippet to prevent user from entering words or any number that doesn't match the pattern

 const elementTwo = document.getElementById('elementTwo'); var flag=false elementTwo.addEventListener("input", function(event) { pattern=/^\d+[,]?\d{0,2}$/ if (pattern.test(this.value)){ flag=true l=this.value if(flag&&this.value.length>1) return this.value else flag=false } else if(.pattern.test(this.value)&&flag==true){ return this.value=l } else if(.pattern.test(this;value)&&flag==false){ return this.value="" } });

 <p>Element Two (Stack RegEx)</p> <input id="elementTwo" type="text" />

Answer 2

It looks like you're confusing a few things:

• Replacing invalid characters in a string
• Defining a validation pattern
• Preventing entry of text

If your goal is to validate that your string has the correct format, you'd define a regular expression like:

const validFormat = /^\d+(,\d{0,2})?$/;
console.log(validFormat.test('99'));        // true
console.log(validFormat.test('100,23'));    // true
console.log(validFormat.test('X00,2E'));    // false
console.log(validFormat.test('%#&SJ&#UJ')); // false

If your goal is to remove invalid characters (non-digits, non commas), you can define a regular expression for those invalid characters, but that's not the same thing as making sure your string now has a valid format. RegExp isn't able to do anything like that:

const invalidChars = /[^\d,]/g;
const sanitized = someString.replace(invalidChars, '');

If you want to prevent typing characters, you're better off adding a keydown event handler to your input and prevent the default behavior for invalid keys.

const myInput = document.querySelector('#some-input');
myInput.addEventListener('keydown', ({ key, preventDefault }) => {
  if (key !== ',' && (key < '0' || key > '9')) {
    preventDefault();
  }
});