Изменить входное значение на числовую схему - 1 1111 1111, регулярное выражение

Я пытаюсь изменить входное значение с любых возможных символов на что-то похожее на номер кредитной карты (поэтому я хочу принимать только цифры и пробелы). Основное различие между моим номером и типичным регулярным выражением номера кредитной карты заключается в том, что мне нужно сопоставить 1 цифру, а затем группы из 4 цифр.

Правильный номер: 1 1234 1234

Неверные числа: 12 1234 123, 1234 1234 1

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

Получил что-то вроде этого:

this.rewardsNumber = this.rewardsNumber
  .replace(/[^\d]/g, '')
  .replace(/(.{4})/g, '$1 ')
  .trim();

Это добавляет пробелы после каждых 4 цифр. Я хочу добавить 1-й пробел после 1-й цифры, а затем еще 4 и т. д.

ОБНОВЛЕНИЕ

Нашел решение, которое хорошо работает при вставке значения для ввода (оно добавляет пробел на лету в правильных местах).

this.rewardsNumber = this.rewardsNumber
  .replace(/[^\d]/g, '')
  .replace(/(.{1})(.{1,3})/g, '$1 $2')
  .trim();

PS: Не заботьтесь о числах после второй 4-й группы цифр. Ввод имеет предел в нем.


javascript regex regexp-replace
person Nosenation    schedule 28.12.2018    source источник
comment
Всегда ли количество цифр одинаково?   -  person Asunez    schedule 28.12.2018
comment
Я узнал что-то вроде этого .replace(/(.{1})(.{1,3})/g, '$1 $2')   -  person Nosenation    schedule 28.12.2018

Ответы (4)


arrow_upward
4
arrow_downward

Вы можете просто изменить регулярное выражение, чтобы оно по-разному относилось к первому символу:

this.rewardsNumber = this.rewardsNumber
  .replace(/\D/g, '')
  .replace(/(^.|.{4})/g, '$1 ')
  .trim();


format.onclick = () => {
    rewardsNumber.value = rewardsNumber.value
      .replace(/\D/g, '')
      .replace(/(^.|.{4})/g, '$1 ')
      .trim();
};
Number to format: <input id="rewardsNumber" size="100%">
<button id="format">Format</button>

Как указано в комментариях, если вы не хотите разбивать группу в конце, если это приведет к группе с менее чем 4 цифрами, вы можете использовать это регулярное выражение:

this.rewardsNumber = this.rewardsNumber
  .replace(/\D/g, '')
  .replace(/(.)(...)(?=.)/g, '$1 $2')
  .trim();


format.onclick = () => {
    rewardsNumber.value = rewardsNumber.value
      .replace(/\D/g, '')
      .replace(/(.)(...)(?=.)/g, '$1 $2')
      .trim();
};
Number to format: <input id="rewardsNumber" size="100%">
<button id="format">Format</button>

person trincot    schedule 28.12.2018
comment
Просто вопрос к этому решению - если последние несколько цифр не образуют полное 4-значное число, как можно изменить это регулярное выражение, чтобы добавить этих сирот в последнюю группу? Например. если ввод: 1234567890 вместо 1 2345 6789 0 сделать 1 2345 67890? Я пытался сделать квантификатор {4,7} и сделать его ленивым, но это не сработало. - person Asunez; 28.12.2018
comment
@Asunez, это довольно просто, если смотреть вперед. Проверьте мой ответ, я тоже добавил эту опцию - person dquijada; 28.12.2018
comment
Я обновил свой ответ, чтобы в конце сохранить цифры вместе, если их разделение приведет к группе менее 4 цифр. Это означает, что эффект будет виден только тогда, когда на входе больше 4 цифр, иначе они просто слипнутся на выходе. - person trincot; 28.12.2018

arrow_upward
1
arrow_downward

Существует оператор регулярного выражения ^, что означает «начало полосы».

Если вы используете ^\d, это означает, что он получает первый \d (число) строки:

this.rewarsdNumber
.replace(/[^\d]/g, '')
.replace(/(^\d|\d{4})/g, '$1 ')
.trim()

Если вы хотите разделить его только на группы или 4 или более (кроме первого), чтобы не было группы с числом менее 4, вы можете изменить его следующим образом, чтобы использовать просмотр вперед:

this.rewardsNumber
.replace(/[^\d]/g, '')
.replace(/(^\d|\d{4}(?=\d{4}))/g, '$1 ')
.trim()
person dquijada    schedule 28.12.2018

arrow_upward
0
arrow_downward

Если вы хотите преобразовать любую длину числа:

s = '1234567890';
s = s.replace(/[^\d]/g, '');
s = s.split('').reverse().join('');
s = s.replace(/(.{4})/g, '$1 ');
s = s.trim();
s = s.split('').reverse().join('');
console.log(s);

person Toto    schedule 28.12.2018

arrow_upward
0
arrow_downward

Вы должны использовать этот шаблон для этого.

this.rewardsNumber.replace(/[^\d]/g, '').replace(/(.{1})(.{3})/g, '$1 $2').trim();

Вы можете проверить изображение ниже, чтобы показать мое тестирование. .imgur.com/pp0rW.png" alt="введите здесь описание изображения">

person Bhavin Thummar    schedule 28.12.2018
comment
Пробовал это, но при вставке значения во ввод он производит эффект после вставки 5 цифр. - person Nosenation; 28.12.2018
comment
Извините, я не понимаю. Вы имеете в виду, что когда вы вводите менее 5 цифр, ваш шаблон не генерируется? - person Bhavin Thummar; 28.12.2018