特点：大小写不敏感，匹配到关键字时只会有一个span标签
直接上代码
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'highlight'
})
export class HighlightPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(value: string, keyword: string): any {
const reg = new RegExp(keyword ? `${keyword}+` : keyword, "gi");
let res: string = value.replace(reg, match => `<span style="color: red;">${match}</span>`);
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
然后
<input type="text" [(ngModel)]="keyword">
...
<div class="content" [innerHTML]="item | highlight:keyword"></div>
效果如图所示
image.png
