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

Posted 2023-03-13

【中文标题】使用管道在输入中每 4 个字符添加一个空格

【英文标题】：Add a space every 4 characters in input with a Pipe

【发布时间】：2020-08-23 22:01:52

【问题描述】：

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

这里的问题是你实际上没有在你的正则表达式中添加任何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

要解决此问题，您需要：

在每个匹配组之后添加一个空格，例如：

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

$1这里代表正则表达式的第一个捕获组。

然后用新的替换值更新该值，例如：

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

【讨论】：

我见过类似的东西。什么是 1 美元？替换值？喜欢它保存在那个变量 4 char 之后添加一个空格？

是的，这里的$1代表正则表达式的第一个捕获组。所以，如果我们有像 '123456789' 这样的值，那么 $1 将表示“1234”、“5678”......所以我们只想在每个组之后添加空格。

嗨，我只是看到了这个问题。当我在输入中写入 exaple 1234 5678 并删除数字 6 时，焦点会回到末尾，而不是停留在我删除的字符的位置。这是为什么呢？

请为此创建一个单独的问题，以便分离关注点，并且未来的用户可以在搜索 SO 时一次获得特定问题的特定答案。我希望这是有道理的。

没问题：***.com/questions/61792503/…