Добавление разделителя к строке неправильной длины - Javascript

Question

Я смотрю на автоматическое заполнение дефисов неправильной длины для поля ввода HTML.

After the 2nd digit/character
After the 6th digit/character
After the 13th digit/character
12-3456-7891234-00000

Я придумал приведенный ниже код, который отлично работает при добавлении дефиса. Однако использование backspace разрушает логику. В любом случае, я могу добиться этого с помощью регулярного выражения, возможно, когда он рассматривает всю строку для обработки разделения?

var newFoo = '';
$('.nzPhoneNumber').on('change keydown paste input', function(){
  var foo = $(this).val();
  if (foo.length === 2) {
    newFoo = foo.concat('-')
    $(this).val(newFoo);
  } else if (foo.length === 7) {
    newFoo = newFoo + foo.substring(3,7) + '-'
    $(this).val(newFoo);
  } else if (foo.length === 15) {
    newFoo = newFoo + foo.substring(8,15) + '-'
    $(this).val(newFoo);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="nzPhoneNumber" />

Ссылка Repl

javascript jquery regex string

2

SubSul 4 Фев 2021 в 10:54

Answer 1

Вы можете использовать шаблон, который будет соответствовать последовательным необязательным шаблонам и заменяться настраиваемой логикой.

Вот код:

const re  = /^(\d{2})(?:(\d{1,4})(?:(\d{1,7})(\d*))?)?$/;

$('.nzPhoneNumber').on('change keydown paste input', function(){
  var foo = $(this).val();
  $(this).val(foo.replace(/\D/g,'').replace(re, (_,a,b,c,d) =>  
   a + 
    ( b ? `-${b}` : "") + 
     ( c ? `-${c}` : "") + 
      ( d ? `-${d}` : "") ));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="nzPhoneNumber" />

Подробности :

.replace(/\D/g,'') - первое действие - удалить все нецифровые символы из входной строки
.replace(re, (_,a,b,c,d) => - теперь замените настраиваемым регулярным выражением, как только совпадение будет найдено, назначьте Группу 1 для a, Группу 2 для b, Группу 3 для c и Группу 4 для d
a + ( b ? `-${b}` : "") + ( c ? `-${c}` : "") + ( d ? `-${d}` : "") ) - это динамически создаваемая строка замены: сначала a используется в начале (так как всегда совпадает), затем - + значение группы 2 добавляется, если группа 2 соответствует в все, в противном случае к a добавляется пустая строка, затем добавляется значение - + Группа 3, если Группа 3 соответствует (в противном случае добавляется пустая строка), и то же самое происходит затем с Группой 4 ( d).

Соответствует шаблону /^(\d{2})(?:(\d{1,4})(?:(\d{1,7})(\d*))?)?$/:

^ - начало строки
(\d{2}) - Группа захвата 1: две цифры
(?:(\d{1,4})(?:(\d{1,7})(\d*))?)? - необязательная последовательность (обратите внимание, что каждый последующий шаблон может совпадать, только если совпадает предыдущий):
- (\d{1,4}) - Группа 2: от одной до четырех цифр
- (?:(\d{1,7})(\d*))?)? - необязательная последовательность
  - (\d{1,7}) - Группа 3: от одной до семи цифр
  - (\d*) - от нуля до пяти цифр
$ - конец строки.

См. демонстрацию регулярных выражений.

ПРИМЕЧАНИЕ . Если последний номер не может содержать более пяти цифр, используйте (?:(\d{1,5})\d*)? вместо последнего (\d*): /^(\d{2})(?:(\d{1,4})(?:(\d{1,7})(?:(\d{1,5})\d*)?)?)?$/.

1

Wiktor Stribiżew 5 Фев 2021 в 10:04

Answer 2

Обычно при создании формата ввода возникают проблемы с возвратом пробела и выбором длины строки. Вы должны исключить клавишу Backspace в событиях или добавить одно число к целевой длине строки (это потому, что предотвращает создание проблемы при удалении строки с помощью backspace).

В любом случае я выбрал второй случай. Поэтому я добавил еще один к вашей целевой длине. Также используются массив, цикл и регулярное выражение для упрощения кода.

$('.nzPhoneNumber').on('change keydown paste input', function(e){
  var foo = $(this).val();
  [3, 8, 16].forEach((item) => {
    if (foo.length == item)
      $(this).val(foo.replace(/(\d)(?=\d$)/, "$1-"));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="nzPhoneNumber" />

0

Mohammad 4 Фев 2021 в 09:22

Добавление разделителя к строке неправильной длины - Javascript

2 ответа

Похожие вопросы

Новые вопросы

javascript