Javascript 用于更改特定字符的内联样式的Angular2管道

我正在尝试制作一个Angular2管道，它将过滤一行文本，并查看文本中是否有“#”sybmol。如果是，则我希望颜色更改为红色，但只有“#”应更改为红色，而不是整个字符串。以下是我到目前为止的情况

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

@Pipe（{name:'redStar'}）
导出类RedStarPipe实现PipeTransform{
转换（文本：字符串，数字：数字）{
if（包括文本（“*”）{
if（numLetters===未定义）{
var str=text.replace（'#'，'*'）；
返回str；
}
}否则{
返回文本；
}
}
}

代码的问题是您想替换

#

散列字符，但在管道中您正在检查

*

星号字符

只要将

if（text.includes（“*”）{

更改为

if（text.includes（“#”）{

，它就可以工作了

另外，要允许替换多个

#

字符，您需要使用带有

g

修饰符的正则表达式：

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

text.replace（/#/g，'*'））

以下是一个工作示例：

---

这是一把小提琴 烟斗

从'@angular/core'导入{Component，Pipe，PipeTransform}；
从“@angular/platform browser”导入{domsanizer}
@管道（{name:'redStar'}）
导出类RedStarPipe实现PipeTransform{
构造函数（私有消毒：domsanizizer）{}
转换（文本：字符串，数字：数字）{
让文本1；
if（text.indexOf（“#”）！=-1{
var str=text.replace（/#/g，“*”）；
text1=str；
}否则{
text1=文本；
}
返回此.sanitized.bypassSecurityTrustHtml（text1）；；
}}

component.html

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

您面临的问题是什么？这是经过编辑的代码：transform（text:string）{if（text.includes（“#”）{var str=text.replace（'#'，'TEST'）；return str；}否则{return text；}代码甚至没有将#字符替换为“TEST”感谢您的回复。在添加“/#/g”部分时，我下面的代码的其余部分都乱七八糟。是否需要添加任何语法来格式化它？我不确定您做错了什么，我为您创建了一个工作示例。这非常有帮助！谢谢！我正在尝试在ng模板中使用它。特别是在表达式上。{{sampleData | redStar}}我试图像您使用的那样将它放在带有[innerHTML]属性的p标记中，但没有成功。您对如何解决这个问题有什么建议吗？您不能使用[innerHTML]对于ng模板，由于ng模板基本上只是一个占位符，因此它不会出现在生成的HTML标记中，因此您无法用HTML填充它。这看起来像是它的工作原理：

。

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