Измените входное значение на числовую схему - 1 1111 1111, Regex

Question

Я пытаюсь изменить входное значение с любых возможных символов на что-то похожее на номер кредитной карты (поэтому я хочу принимать только цифры и пробелы).Основное различие между моим номером и номером кредитной карты, типичным регулярным выражением, заключается в том, что мне нужно сопоставить 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-х цифр.Вход имеет ограничение.

Answer 1

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

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);

Answer 2

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

Если вы используете ^ \ 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()

Answer 3

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

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

Вы можете проверить изображение ниже, чтобы показать мое тестирование.

Answer 4

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

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>