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>