一个输入中的多个正则表达式

Question

hi i have one input type tel for mobile number and like use pattern for number format like this 938 119 1229 but when i use type tel i can use word in input i try use the two regex in one input but i don't know how:

function mobileNumInput(input){
    var regex = /[^0-9]/g;  //for digit only
    input.value=input.value.replace(/^(\d{3})(\d{3})(\d+)/, '$1 $2 $3');   //for space between numbers
    input.value=input.value.replace(regex)      

}

and html:

<input type="tel" name="phone"  placeholder="912 000 0000" maxlength="12"  min="0" max="9" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"  onkeyup="mobileNumInput(this)"  autofocus>

this is my placeholder: enter image description here

i want this format: enter image description here

But I don't want to use word like this: enter image description here sorry my english is bad

Answer 1

I'm guessing that you want to do the following:

1. Remove all non-numeric characters from the phone number.
   • Example: convert '(111)-174-1234' to '1111741234'
2. Add spaces in the correct location to the resultant number.
   • Example: convert '1111741234' to '111 174 1234'

If my assumptions about the purpose of this code are true, your code had two mistakes:

1. You put step #1 after step #2.
   • This led to an input '(111)-174-1234' having the regex (#2) running the following replacement: .replace(/^(\d{3})(\d{3})(\d+)/, '$1 $2 $3')
   • The above snippet of code only works on pure numbers. It does not recognize '(111)-174-1234' as containing any matches to /^(\d{3})(\d{3})(\d+)/ , so no replacements are made. In other words, after line 3 of your code runs, input.value has likely not changed.
   • The solution to this is simply to switch line 3 and 4 in your program.
2. In step #1, you used .replace(regex) instead of .replace(regex,'') .
   • This is just a String method technicality: String.prototype.replace accepts a regex and a string to replace it. Leaving the second parameter empty is the same as setting the second parameter as undefined .
   • An example is that "Hello world".replace(/l/g) is the same as "Hello world".replace(/l/g,undefined) . The result of both of these snippets is "Heundefinedundefinedo world" . You can gain the desired behavior by using "Hello world".replace(/l/g,'') instead. This will return "Heo world" .

I put my fixes into a revised version of your code:

function mobileNumInput(input){
    var regex = /[^0-9]/g;  //for digit only
    input.value=input.value.replace(regex, ''); // Step #1 (remove non-digits)
    input.value=input.value.replace(/^(\d{3})(\d{3})(\d+)/, '$1 $2 $3');   //Step #2 (add spaces to valid phone number)
}

Here is a slightly further modified version of your code with one test:

function mobileNumInput(input){
    input.value=input.value
      .replace(/[^0-9]/g, '')//Remove all non-digits
      .replace(/^(\d{3})(\d{3})(\d+)/, '$1 $2 $3'); //Add spaces to the only-digit number 
}

function test(){
  var testInputElement=document.createElement("input");
  testInputElement.value='(123)-[456}  -  7890';//Horribly formatted phone number
  mobileNumInput(testInputElement);
  console.log(testInputElement.value);
}

test();
//123 456 7890