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

Question

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

@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