半纸药笺 2019-06-28
import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe 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, `<span style="color: #81E1B7;">${keyword}</span>`); console.log(res); return this.sanitizer.bypassSecurityTrustHtml(res); } } }
注: DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析
<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label>
注: 在<ion-item>标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。
开源项目地址: https://github.com/alex-0407/...
更多angular1/2/4/5、ionic1/2/3/4、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请扫一扫下面的二维码关注微信公众号——全栈弄潮儿。
福利专区:扫码关注,免费领取淘宝天猫内部优惠券
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下。<el-input type="search" v-model="search" style="w