javascript - 用于在用户键入时自动格式化电话字段的正则表达式

Question

我已经查看了 SO 上的示例，但没有一个是我真正想要的。
我的问题是，当用户继续输入时，我尝试在区号和接下来的 3 个数字之后添加一个空格，然后在最后 4 个字符之间添加一个破折号，但是国家前缀消失了，破折号也消失了。
我正在寻找最终的电话格式:+1 999 999 99-99

如果用户键入 9 (或除 1 之外的任何其他内容)到 空 字段，则结果应为 +1 9 .

如果值为 +1 999用户输入9 ，结果应该是 +1 999 9

如果值为 +1 999 999 99用户输入9 ，结果应该是 +1 999 999 99-9

如果值为 +1 999 999 99-9并且用户点击退格，结果应该是+1 999 999 99

如果值为 +1 9并且用户点击退格，结果应该是''

这是我在 JSFiddle 上的尝试.

const onKeyup = (e) => {
    const input = document.getElementById('input');
  const value = input.value;
  
  let _value = value;
  if (_value.length === 1) {
    _value = `+1 (${value}`;
  } else {
    _value.replace(
      /(\d{1,2})(\d{1})?(\d{1,2})?(\d{1,4})?/,
      function(_, p1, p2, p3, p4) {
        let output = ""
        if (p1) output = `${p1}`;
        if (p2) output += `${p2}`;
        if (p3) output += ` ${p3}-`
        if (p4) output += ` ${p4}`
        _value = output;
      }
    );
  }
  input.value = _value
}

Answer 1

我设法在没有正则表达式的情况下做到了这一点，我知道这不是您所要求的，但无论如何我都会发布我的解决方案。
但是请考虑，如果可以使用 native 解决方案，您应该尝试避免使用正则表达式，因为与普通代码相比，正则表达式相当陈旧且速度较慢。

const onKeyup = (e) => {
    const input = document.getElementById('input');
  const value = input.value;
  
  let _value = value;
  if(e.keyCode != 8) {
    if(_value.length == 1)
      _value = `+1 ${_value}`;
    else if(_value.length == 6 || value.length == 10)
      _value = _value + ' ';
    else if(_value.length == 13)
      _value = _value + '-'
  }
    
  input.value = _value
}

const input = document.getElementById('input').addEventListener('keyup', onKeyup)

<input id="input" onkeyup="onKeyup()" />

此外，如果您从 HTML 调用该函数，则不会传递事件参数，因此您必须从 javascript 添加一个监听器。
希望这可以帮助。显然这是一个准系统脚本，但您可以以此为起点。