Angular6实现搜索关键字词高亮

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38712932/article/details/85448824

效果图如下：

 

1、创建一个pipe

2、写pipe（可以完全复制）

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 {
    const Reg = new RegExp(keyword, 'i');
    if (val) {
      const res = val.replace(Reg, `<a style="color: #ff2424;">${keyword}</a>`);
      console.log(res);
      return this.sanitizer.bypassSecurityTrustHtml(res);
    }
  }

}

注意：DomSanitizer，这个的目的是是数据在页面上的绑定能够safe的解析

 

2.在页面中使用

 <li *ngFor="let blog of searchblogs"><i><a href="/blogconent/1"><img src="../../../../../../assets/images/1.jpg"></a></i>
    <h3><a href="/" [innerHTML]="blog.article_title | keyword:keyword"></a></h3>
    <p [innerHTML]="blog.article_content | keyword:keyword"></p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date" [innerHTML]="blog.article_time | keyword:keyword"></span>
      </p>
      <p>
        <span class="read-num">阅读数：{{blog.read_number}}</span>
      </p>
      <p>
        <span class="read-num">评论数：{{blog.comment_number}}</span>
      </p>
    </div>
  </li>

 注意：这里要用innerHTML来绑定数据。

参考文章：https://www.cnblogs.com/shitoupi/p/6710341.html