特點(diǎn)：大小寫不敏感，匹配到關(guān)鍵字時(shí)只會(huì)有一個(gè)span標(biāo)簽
直接上代碼
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
