使用管道在输入中每 4 个字符添加一个空格

Question

我有一个用户需要插入 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;
  }
}

Answer 1

这里的问题是你实际上没有在你的正则表达式中添加任何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这里代表正则表达式的第一个捕获组。

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