Регулярное выражение для автоформатирования поля телефона по мере ввода пользователем

Question

Я просмотрел примеры на SO, но ни один из них не является тем, что я ищу.

Моя проблема в том, что когда пользователь продолжает печатать, я пытаюсь добавить пробел после области код и следующие 3 цифры, а затем da sh между последними 4 символами, но префикс страны и тире также исчезают.

Я ищу окончательный формат телефона: +1 999 999 99-99

• Если пользователь вводит 9 (или что-то еще, кроме 1) в поле empty , результат должен быть +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

Мне удалось сделать это без регулярного выражения, я знаю, что это не то, о чем вы просили, но я все равно опубликую свое решение. Однако учтите, что вам следует избегать регулярных выражений, если возможно собственное решение, поскольку регулярное выражение довольно старое и медленное по сравнению с ванильным кодом.

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.

Надеюсь, это поможет. Очевидно, что это базовый сценарий, но вы можете использовать его в качестве отправной точки.

Answer 2

Поскольку вы просите решение e regex , вот модификация вашего скрипта, которая, как я полагаю, дает вам желаемый результат. В случае, если пользователь вводит ненужные символы в конце строки, которые не соответствуют шаблону номера телефона, он также удаляет их:

const onKeyup = (e) => {
    const input = document.getElementById('input');
    const value = input.value;

    let _value = value;
    if (_value.length === 1 && _value != '1' && _value != '+') {
        _value = `+1 ${value}`;
    } else if (_value.match(/[+]\d\s*$/)) {
        _value = ""
    } else {
        _value = _value.replace(
            /([+]\d)\s*(\d{1,3})?\s*(\d{1,3})?\s*(\d{1,2})?-?(\d{1,2})?.*/,
            function(_, p1, p2, p3, p4, p5) {
                let output = ""
                if (p1) output = `${p1}`;
                if (p2) output += ` ${p2}`;
                if (p3) output += ` ${p3}`;
                if (p4) output += ` ${p4}`;
                if (p5) output += `-${p5}`;
                return output;
            }
        );
    }
    input.value = _value;
}