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

Question

你好，我有一种电话号码输入类型，喜欢使用这样的数字格式模式 938 119 1229 但是当我使用 type tel 时，我可以在输入中使用 word 我尝试在一个输入中使用两个正则表达式，但我不知道如何:

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

}

和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>

这是我的占位符： enter image description here

我想要这种格式： enter image description here

但我不想使用这样的词： enter image description here 抱歉我的英语不好

Answer 1

我猜您想执行以下操作：

从 phone 号码中删除所有非数字字符。
- 示例：将 '(111)-174-1234' 转换为 '1111741234'
在结果数字的正确位置添加空格。
- 示例：将 '1111741234' 转换为 '111 174 1234'

如果我对这段代码用途的假设是正确的，那么您的代码有两个错误：

您将第 1 步放在第 2 步之后。
- 这导致输入 '(111)-174-1234' 具有正则表达式 (#2) 运行以下替换：.replace(/^(\d{3})(\d{3})(\d+)/, ' ')
- 以上代码片段仅适用于纯数字。它不会将 '(111)-174-1234' 识别为包含与 /^(\d{3})(\d{3})(\d+)/ 的任何匹配项，因此不会进行任何替换。换句话说，在您的代码第 3 行运行后，input.value 可能没有改变。
- 解决这个问题的方法很简单，就是在你的程序中切换第 3 行和第 4 行。
在第 1 步中，您使用了 .replace(regex) 而不是 .replace(regex,'')。
- 这只是一个 String 方法技术问题：String.prototype.replace 接受一个正则表达式和一个字符串来替换它。将第二个参数留空等同于将第二个参数设置为 undefined.
- 例如 "Hello world".replace(/l/g) 与 "Hello world".replace(/l/g,undefined) 相同。这两个片段的结果都是 "Heundefinedundefinedo world"。您可以改用 "Hello world".replace(/l/g,'') 来获得所需的行为。这将 return "Heo world".

我将我的修复放入了您代码的修订版本中：

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+)/, '  ');   //Step #2 (add spaces to valid phone number)
}

这是您的代码经过一次测试后稍作修改的版本：

function mobileNumInput(input){
    input.value=input.value
      .replace(/[^0-9]/g, '')//Remove all non-digits
      .replace(/^(\d{3})(\d{3})(\d+)/, '  '); //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

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

multiple regexp in one input

javascript

regex

regexp-replace