angular搜索关键字高亮展示

使用angular管道实现方式

自定义管道：
highlight.pip.ts

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
    name:'highlight'
})
export class Highlight implements PipeTransform{
    
    constructor(private sanitizer: DomSanitizer) { }

    transform(value: any, key: string) {
        if(key) {
            let val = value.replace(new RegExp(key, 'img'), `<span style="color: #CC0000;">${key}</span>`);
            return this.sanitizer.bypassSecurityTrustHtml(val);
        }
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}

*注意：需要使用DomSanitizer把值净化为安全内容，否则不生效

app.module.ts

import { Highlight } from './myPow.pipe';
@NgModule({
  declarations: [
    Highlight,
  ]
})

使用：

<div [innerHTML]="title | highlight: searchVal"></div>