множественное регулярное выражение в одном входе - PullRequest
Новая
       13

множественное регулярное выражение в одном входе

0 голосов
/ 17 октября 2019

Привет, у меня есть один тип ввода tel для номера мобильного телефона и, как использовать шаблон для числового формата, как это 938 119 1229, но когда я использую тип tel, я могу использовать слово во вводе, я пытаюсь использовать два регулярных выражения в одном вводе, но я нене знаю как: 

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)      

}

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

это мой заполнитель: введите описание изображения здесь

я хочу этот формат: введите описание изображения здесь

Но я не хочу использовать такое слово: введите описание изображения здесь извините, мой английский плохой

1 Ответ

1 голос
/ 17 октября 2019

Я предполагаю, что вы хотите сделать следующее:

  1. Удалить все нечисловые символы из номера телефона.
    • Пример: преобразование '(111)-174-1234' в '1111741234'
  2. Добавить пробелы в правильном месте к результирующему числу.
    • Пример: преобразовать '1111741234' в '111 174 1234'

Если мои предположения о назначении этого кода верны, ваш код содержит две ошибки:

  1. Вы ставите шаг № 1 после шага № 2.
    • Это привело к вводу '(111)-174-1234' с регулярным выражением (# 2), выполняющему следующую замену: .replace(/^(\d{3})(\d{3})(\d+)/, '$1 $2 $3')
    • Приведенный выше фрагмент кода работает только для чистых чисел. не распознает '(111)-174-1234' как содержащее совпадения с /^(\d{3})(\d{3})(\d+)/, поэтому замены не производятся. Другими словами, после запуска строки 3 вашего кода input.value, вероятно, не изменился.
    • Решение этой проблемы заключается в простом переключении строк 3 и 4 в вашей программе.
  2. На шаге 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,''). Это вернет "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+)/, '$1 $2 $3');   //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+)/, '$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
...