效果图如下：
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">评论数：{{ment_number}}</span></p></div></li>
注意：这里要用innerHTML来绑定数据。
参考文章：/shitoupi/p/6710341.html
