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

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

要解决此问题，您需要：

在每个匹配组后添加一个space如：
```
.replace(/(.{4})/g, ' ')
```
</code>这里表示正则表达式的第1个捕获组。</p></li> <li><p>然后用新的替换值更新值，如：</p> <pre><code>value = value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, ' ').trim();

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

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

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

Add a space every 4 characters in input with a Pipe

pipe

typescript

ecmascript-6

ionic3

angular5