angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例


Posted in Javascript onAugust 17, 2018

本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下:

添加一个pipe:

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的解析

html中使用方法:

<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label>

注: 在标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。

演示效果

angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

开源项目地址:https://github.com/alex-0407/ionic3-awesome

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
图解js图片轮播效果
Dec 20 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
js实现小星星游戏
Mar 23 Javascript
JavaScript原型链详解
Nov 07 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 #Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 #Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
You might like
php图片添加水印例子
2016/07/20 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python打开使用的方法
2019/09/30 Python
YUV转为jpg图像的实现
2019/12/09 Python
python scatter函数用法实例详解
2020/02/11 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
电气技术员岗位职责
2013/11/19 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
节能环保标语
2014/06/12 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
山楂树之恋观后感
2015/06/11 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
班委竞选稿范文
2015/11/21 职场文书
Java版 简易五子棋小游戏
2022/05/04 Java/Android
ant design charts 获取后端接口数据展示
2022/05/25 Javascript