I am trying to make an Angular2 pipe that will filter through a line of text and see if a the "#" sybmol is in the text. If it is, then I would like the color to change to red but only '#' should change to red, not the entire string. Below is what I have thus far.

@Pipe({ name: 'redStar' })
export class RedStarPipe implements PipeTransform{
    transform(text: string, numLetters: number){
        if(text.includes("*")) {
            if(numLetters === undefined) {
                var str = text.replace('#', '<span style="color: red">*</span>');
                return str;
            }
        } else {
            return text;
        }
    }
}

I am trying to make an Angular2 pipe that will filter through a line of text and see if a the "#" sybmol is in the text. If it is, then I would like the color to change to red but only '#' should change to red, not the entire string. Below is what I have thus far.

@Pipe({ name: 'redStar' })
export class RedStarPipe implements PipeTransform{
    transform(text: string, numLetters: number){
        if(text.includes("*")) {
            if(numLetters === undefined) {
                var str = text.replace('#', '<span style="color: red">*</span>');
                return str;
            }
        } else {
            return text;
        }
    }
}

• javascript
• html
• angular

Share Improve this question Follow edited Oct 26, 2017 at 13:31 Martin Adámek 18.5k55 gold badges4848 silver badges7171 bronze badges asked Oct 26, 2017 at 13:16 DevilRunnerDevilRunner 5111 silver badge77 bronze badges 2

• What issue are you facing? – Hacker Commented Oct 26, 2017 at 13:35
• This is the edited code: transform(text: string){ if(text.includes("#")){ var str = text.replace('#', 'TEST'); return str; } else{ return text; } } The code is not even replacing the # characters with "TEST" – DevilRunner Commented Oct 26, 2017 at 13:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The problem with your code is that you want to replace # hash character, but in your pipe you are checking the * asterisk character.

Just change if (text.includes("*")) { to if (text.includes("#")) { and it will be working.

Also to allow replacing multiple # characters, you need to use regex with g modifier:

text.replace(/#/g, '<span style="color: red">*</span>')

Here is a working example:

https://stackblitz./edit/angular-playground-djvdwb

here is a fiddle with the soltution https://stackblitz./edit/angular-5am1ni pipe.ts

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({ name: 'redStar' })
export class RedStarPipe implements PipeTransform{
constructor(private sanitized: DomSanitizer) {}
transform(text: string, numLetters: number){
let text1;
if(text.indexOf("#") !== -1){  
    var str = text.replace(/#/g, "<span style='color: red'>*</span>");
    text1 = str;
}else{
   text1 = text;
 }
 return this.sanitized.bypassSecurityTrustHtml(text1);;
 }}

ponent.html

<div [innerHTML]="name  | redStar"></div>