实现效果

tips:这里是大小写都匹配了 可以自己加一个属性来判断是否要区分大小写 根据大佬写的管道继续修改==

使用方法

<span [innerHTML]="item?.title | highlightSearchResult: searchValue : 2 : true | safe: 'html'"></span>

safe管道

代码如下

enum IHightType {
  Deafult = 0, // 默认字体红色
  YellowBackGround = 1, // 黄色背景
  BlueFontGround = 2, // 蓝色字体
}
@Pipe({
  name: 'highlightSearchResult',
})

export class HighlightSearchPipe implements PipeTransform {

  /**
   *
   *
   * @param {string} value 值
   * @param {string} [args] 搜索值
   * @param {number} [type] 类型(颜色不同) 0 红色高亮(默认) 1 黄色背景色 2 蓝色高亮
   * @param {boolean} [isMultiple] 是否匹配多个 true为多个匹配 false为单一匹配
   * @return {*}  {string}
   * @memberof HighlightSearchPipe
   */
  public transform(value: string, args?: string, type?: number, isMultiple?: boolean): string {
    const argsArr = args && args.split('.'); // 是以点来分割需要搜索的值
    const needSearchValue = argsArr && argsArr[argsArr.length - 1];
    let endValue = value;
    const isEnglishReg = new RegExp('^[a-zA-Z]+$');
    if (isEnglishReg.test(needSearchValue)) {     // 输入拼音的情况
      endValue = this.getEndValue(value, needSearchValue, value, type, isMultiple);
    } else {
      const searchValue = needSearchValue;
      const regExp = new RegExp(searchValue, 'gi'); // 全局匹配忽略大小写
      if (regExp.test(value)) {
        endValue = this.getEndValue(value, needSearchValue, value, type, isMultiple);
      }
    }
    return endValue;
  }

  public getEndValue(
    value: string, searchValue: string,
    oriValue: string, type: number = 0, isMultiple: boolean = false): string {
    if (searchValue) {
      let endValue = oriValue;
      const upperValue = value.toUpperCase();
      const upperSearch = searchValue.toUpperCase();
      const matchIndex = upperValue.indexOf(upperSearch);
      if (matchIndex !== -1) {
        let afterValue = oriValue.substring(matchIndex + searchValue.length);
        // 增加多个匹配
        afterValue = isMultiple ? this.getEndValue(afterValue, searchValue, afterValue, type, isMultiple) : afterValue;
        switch (type) {
          case IHightType.YellowBackGround:
            endValue = oriValue.substring(0, matchIndex) +
            `<span style="background-color: #FFC900">${oriValue.substring(matchIndex, matchIndex + searchValue.length)}</span>`
            + afterValue;
            break;
          case IHightType.BlueFontGround:
            endValue = oriValue.substring(0, matchIndex) +
            `<span style="color: #009FFF">${oriValue.substring(matchIndex, matchIndex + searchValue.length)}</span>`
            + afterValue;
            break;
          default:
            endValue = oriValue.substring(0, matchIndex) +
            `<span style="color: red">${oriValue.substring(matchIndex, matchIndex + searchValue.length)}</span>`
            + afterValue;
            break;
        }
      }
      return endValue;
    } else {
      return oriValue;
    }
  }
}