参考：https://stackoverflow.com/questions/56880119/how-to-get-a-highlight-keyword-pipe-to-show-case-insensitive-matches

特点：大小写不敏感，匹配到关键字时只会有一个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