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

It's not clear to me what you're trying to do. Your sample data is numerals followed by an optional decimal part, but your regex says "replace 1-to-many alphabetical letters followed by an optional dot and 0-2 alphabetical letters with an empty string." What exactly are you trying to do? — Jacob
– Jacob, Commented Jul 16, 2020 at 0:13
Did you by mistake use a dot . instead of a comma ,? And do you want to match letters or numbers? — ssc-hrep3
– ssc-hrep3, Commented Jul 16, 2020 at 0:15
@ssc-hrep3 I used dot because the post, I know that in latin America we use comma. But could be the same. — yasserpulido
– yasserpulido, Commented Jul 16, 2020 at 0:29
@Jacob This is the reading of the replace process that I'am understanding right now: if I try to type a letter [a-zA-Z]+, I will receive empty space. But if I type a number, I will be allowed, but the rest of the regex doesn't works. What exactly am I trying to do? An input that only allow type a number with decimals. — yasserpulido
– yasserpulido, Commented Jul 16, 2020 at 0:29
You may want to see stackoverflow.com/questions/8282266 and stackoverflow.com/questions/13607278 about how to restrict the input. Or you could use an <input type="number"> which allows decimals (but not group separators) and the decimal character it allows should be based on Locale. As a bonus type="number" will generally switch to a numeric keyboard on mobile devices. — Stephen P
– Stephen P, Commented Jul 16, 2020 at 0:48

Sven.hig · Accepted Answer · 2020-07-16 02:35:59Z

2

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" />

edited Jul 16, 2020 at 2:35

answered Jul 16, 2020 at 0:20

Sven.hig

4,5292 gold badges10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

yasserpulido Over a year ago

I tried something like that, and I can type letter. I tried now with your regex, and I can type letter. That is why I do the opposite, and you think that I'm wrong. Maybe could be the event or something like that I'm doing wrong. I will edit my post and add a CodePen with two input, my regex and your regex. Follow me!

Sven.hig Over a year ago

I have updated my answer and included a code snippet check it out

yasserpulido Over a year ago

That I have trying to do, I didn´t know about test method. But, Is it a way to just prevent type letters and just not delete everyting when you type a letter for example?

Sven.hig Over a year ago

can you give me an example?

yasserpulido Over a year ago

A example could be:1).Run your code snippet. 2).typedown 22 3).And then type a letter, everything is deleted in the input. I am burnout to think, I spent the entire day in this. Sorry and thanks in advance. PD: I was thinking about maybe do not return a empty space, if not return the last value typed, what do you think? @Sven.hig

|

Jacob · Accepted Answer · 2020-07-16 00:39:38Z

0

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();
  }
});

answered Jul 16, 2020 at 0:39

Jacob

79k24 gold badges159 silver badges245 bronze badges

1 Comment

Jacob Over a year ago

I'd definitely go with @StephenP's suggestion to use a numeric input, though; leaving this here in case it's still useful to you or others.

Collectives™ on Stack Overflow

RegEx doesn´t work with Replace JavaScript Method

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related