Question

我正在尝试制作一个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;
        }
    }
}

Answer 1

您的代码的问题是您要替换#哈希字符，但在管道中您正在检查*星号字符。

只需将if (text.includes("*")) {更改为if (text.includes("#")) {即可。

另外，为了允许替换多个#个字符，您需要使用带有g修饰符的正则表达式：

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

这是一个有效的例子：

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

Answer 2

这是一个解决问题的小提琴https://stackblitz.com/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);;
 }}

component.html

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

Angular2 Pipe用于更改特定字符的内联样式

2 个答案: