【Angular】Angular中管道的使用---匹配搜索结果中的关键词并高亮显示

HTML文件

<p-table [value]="searchData" styleClass="publicity-table">
    <ng-template pTemplate="header">
        <tr>
            <th style="width:5%">序号</th>
            <th style="width:20%">处罚文书编号</th>
            <th style="width:10%">主办人/协办人</th>
            <th>案件描述</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-index="rowIndex">
        <tr (click)="click(rowData)">
            <td style="text-align: center;">{{index+1}}</td>
            <td [title]="rowData.content.punish_document_code"
                [innerHTML]="rowData.content.punish_document_code | keyword: keyWord">
            </td>
            <td [title]="rowData.content.lawman_name"
                [innerHTML]="rowData.content.lawman_name | keyword: keyWord">
            </td>
            <td [title]="rowData.content.case_introduce"
                [innerHTML]="rowData.content.case_introduce | keyword: keyWord"></td>
        </tr>
    </ng-template>
</p-table>

对应的keyWord

this.keyWord = v[obj]['analyzeSearchTerms'].join(',');

管道pipe.ts文件-search-keyword-pipe.ts

import {Injectable, Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'keyword'
})
@Injectable()
export class SearchkeyWordPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {
  }

  transform(val: string, keyword: string): any {

    if (!keyword || !val) {
      return val;
    }
    let keywords = keyword.split(',');
    keywords.forEach(k => {
      let Reg = new RegExp(k, 'g');
      if (val) {
        val = val.replace(Reg, `<a style="color: #ff2424;font-weight: inherit;">${k}</a>`);
      }
    });
    if (val.indexOf('<a') === -1) {
      return val;
    }
    return this.sanitizer.bypassSecurityTrustHtml(val);

  }
}