He escrito una tubería en Angular para reemplazar el carácter | con un ,.

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

El resultado deseado es Name,with,pipes, pero lo veo como ,N,a,m,e,|,w,i,t,h,|,p,i,p,e,s,

Aquí está el código para la tubería:

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);
  }
}

Aquí está el código en StackBlitz. ¿Cómo puedo arreglar esto?

1
Jake 9 may. 2019 a las 18:26

3 respuestas

La mejor respuesta

Tienes que hacerlo así o cambiar tu tubería

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

O sí, doble escape como sugieren los demás. La pista es, ya es un significado específico bajo regex, por lo que no puede usarlo directamente

1
jcuypers 9 may. 2019 a las 15:37

El carácter | se interpreta como el carácter de alternancia en la expresión regular. Puede escapar de la cadena de búsqueda con la ayuda del método proporcionado en esta respuesta:

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

La cadena resultante se usa para crear la expresión regular en el método de tubería transform:

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

Con esta técnica, el marcado de la plantilla no tiene que tener en cuenta los detalles de implementación, y puede usar la tubería normalmente:

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

Consulte este stackblitz para obtener una demostración.

2
ConnorsFan 9 may. 2019 a las 16:22

Aparentemente, debes escapar del personaje en tu html cuando llamas a la tubería.

En su app.component.html intente escribir esta línea:

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

Y debería funcionar. (stackblitz actualizado aquí)

1
Carbamate 9 may. 2019 a las 15:36