Добавьте пробел каждые 4 символа во вводе с помощью трубы - PullRequest
Новая
       105

Добавьте пробел каждые 4 символа во вводе с помощью трубы

0 голосов
/ 08 мая 2020

У меня есть ввод, где пользователю нужно вставить 24 символа. Я попытался сделать канал с regExp, но пробелы не добавлены.

Я видел функции, которые могли это делать, но я хотел, чтобы это было просто с помощью regExp. 

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: 'formatBankAcc'
})

export class FormatBankAccPipe implements PipeTransform {
  transform(value: string) {
    if(value != null){
      value.replace(/[^\dA-Z]/g, '')
      .replace(/(.{4})/g, value)
      .trim();
      console.log(value);
    }
    return value;
  }
}

1 Ответ

1 голос
/ 08 мая 2020

Проблема в том, что вы фактически не добавляете space в свое регулярное выражение. Вместо этого вы снова заменяете текст тем же значением. Кроме того, вы не обновляете value замененным значением. Вы просто возвращаете текущее значение, например: 

function transform(value) {
  if (value != null) {
    value.replace(/[^\dA-Z]/g, '')
      .replace(/(.{4})/g, value)
      .trim();
    console.log(value);
  }
  return value;
}

transform('123456789') //=> 123456789 ... returns same value

Чтобы исправить это, вам необходимо:

  1. Добавить пробел после каждой совпадающей группы, например: 

    .replace(/(.{4})/g, '$1 ')

    $1 здесь представляет 1-ю группу захвата регулярного выражения.

  2. Затем обновите значение новым замененным значением, например: 

    value = value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();


function transform(value) {
  if (value != null) {
    value = value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
    console.log(value);
  }
  return value;
}

transform('123456789')  
//=> 1234 5678 9 ... returns value w/ a space every 4 character
...