Question

我已经在Angular中编写了一个管道，以将字符|替换为,。

export class AppComponent  {
  name = 'Name|with|pipes';
}

所需的输出为Name,with,pipes，但我将其显示为,N,a,m,e,|,w,i,t,h,|,p,i,p,e,s,

这是管道的代码：

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

@Pipe({name: 'replace'})
export class ReplacePipe implements PipeTransform {
  transform(value: string, strToReplace: string, replacementStr: string): string {

    if(!value || ! strToReplace || ! replacementStr)
    {
      return value;
    }

 return value.replace(new RegExp(strToReplace, 'g'), replacementStr);
  }
}

这是StackBlitz上的代码。我该如何解决？

Answer 1

字符|在正则表达式中被解释为替代字符。您可以借助this answer中给出的方法对搜索字符串进行转义：

escapeStr(str) {
  return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}

然后，将所得的字符串用于在管道transform方法中创建正则表达式：

return value.replace(new RegExp(this.escapeStr(strToReplace), 'g'), replacementStr);

使用这种技术，模板标记不必知道实现细节，并且可以正常使用管道：

{{ name | replace : '|' : ',' }}

有关演示，请参见this stackblitz。

Answer 2

显然，调用管道时，您需要在html中转义该字符。

在您的app.component.html中，尝试编写以下行：

{{ name | replace : '\\|' : ',' }}

它应该工作。（stackblitz在这里更新）

Answer 3

您需要这样做或更改管道

{{ name | replace : '[|]' : ',' }}

或者是，像其他人一样建议两次逃脱。线索是，已经是正则表达式下的特定含义，所以您不能直接使用它

角管更换字符

3 个答案: