CODEWITHSUNDEEP
javascripthtmlregexreplace
Yoset GA
Yoset GA

Reputation: 39

Javascript replace with regex not working correctly

I'm trying to validate a name with regex, the regex stops the user from entering 2 spaces or dots in a row.

This is my code:

function test(input) {
  var regex = /^[A-Za-z]+\.{0,1}\s{0,1}$/;
  input.value = input.value.replace(regex, "");
}
<input id="txt_NomCandidato" onkeyup="test(this);" type="text" class="form-control" name="txt_Nom">

At the moment I want to enter a letter, I cant I don't know why, I hope you guys can help.

EDIT: Name only contains letters, not numbers.

Upvotes: 2

Views: 2713

Answers (6)

The fourth bird
The fourth bird

Reputation: 163632

That is because you match [A-Za-z]+ which will match one or more characters and everything after that is optional.

Your regex would match.

  • [A-Za-z]+ Match one or more characters
  • \.{0,1} Match optional dot (0 or 1 times)
  • \s{0,1} match optional whitespace character (0 or 1 times)

Which will match a and then you will do the replace.

To make something optional you could also use a question mark ?

To only allow characters, a single whitespace or a single dot you could replace all that does not match those criteria:

([. ])(?=\1)|[^a-zA-Z. ]

function test(input) {
  var regex = /([. ])(?=\1)|[^a-zA-Z. ]/;
  input.value = input.value.replace(regex, "");
}
<form id="" name="">
  <input id="txt_NomCandidato" onkeyup="test(this);" type="text" class="form-control" name="txt_Nom">
</form>

To match a dot followed by a dot or a white space followed by a white space you could capture a dot or a white space in a group and it will match if it is followed by what is captured in the group using a positive lookahead.

([. ])(?=\1)

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28665

The following regex should work for you: /[^a-zA-Z. ]|\.(?=\.)|\s(?=\s)/g

  • [^a-zA-Z. ]+ Limits all allowed characters to a-z, A-Z, dots, or spaces
  • \.(?=\.) Limits it to only allow one dot in a row
  • \s(?=\s) Limits it to only one space in a row

Each of these are separated by | (the or condition)

function test(input) {
  var regex = /[^a-zA-Z. ]|\.(?=\.)|\s(?=\s)/g;
  input.value = input.value.replace(regex, "");
}
<input id="txt_NomCandidato" onkeyup="test(this);" type="text" class="form-control" name="txt_Nom">

Upvotes: 1

Scath
Scath

Reputation: 3824

This regex will not allow them to enter two periods or two spaces, when they enter the second of either it will clear. 

function test(input){
  var regex=/\.{2}| {2}/;
  input.value = input.value.replace(regex, "").replace(/\d+|/g, '').replace(/\s+/g, ' ').replace(/[^\w]/, '');
}
<input id="txt_NomCandidato" onkeyup="test(this);" type="text" class="form-control" name="txt_Nom">

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option of slice

input.value.slice(-2) will return last two entered characters and if it is ".." or " "(double spaces) replace it with ''

function test(input){
  if(input.value.slice(-2)=='..' || input.value.slice(-2)=='  '){
         input.value = input.value.replace(input.value.slice(-2), "");
     }
}
<input id="txt_NomCandidato" onkeyup="test(this);" type="text" class="form-control" name="txt_Nom">

code sample - https://codepen.io/nagasai/pen/VXNOej

Your regex clears any characters starts with [A-Z] or [a-z] due to expression ^[A-Za-z]

Upvotes: 1

Dyragor
Dyragor

Reputation: 397

With this solution it deletes only the second space or second dot and the first ones will still remain:

function test(input){
  var regex=/\.(?=\.)|\s(?=\s)/;
  input.value = input.value.replace(regex, "");
}
<input id="txt_NomCandidato" onkeyup="test(this);" type="text" class="form-control" name="txt_Nom">

Upvotes: 2

Javier Gbas
Javier Gbas

Reputation: 146

Your regex seems correct (it matches any string with no more than 1 space or 1 dot together), but your the logic in your function seems wrong.

What it's doing: anytime the value changes, take the value and replace anything that matches that regex with an empty string, so any time you write a character its replaced (because it matches the regex).

I would go with one of this options:

a) show a message if the value doesn't match the regex

b) change the regex to /.{2}| {2}/ and only replace the two dots or the two spaces, as Scath says in another answer

c) maybe just using the input pattern attribute with your original regex is enough: https://www.w3schools.com/TAGS/att_input_pattern.asp

Hope this helps!

Upvotes: 1

Related Questions