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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
js的回调函数详解
Jan 05 Javascript
window.open()实现post传递参数
Mar 12 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python网站验证码识别
2016/01/25 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python 接口返回的json字符串实例
2018/03/27 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python 下载及安装详细步骤
2019/11/04 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
腾讯广告词
2014/03/19 职场文书
努力学习演讲稿
2014/05/10 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
项目申请汇报材料
2014/08/16 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
会议营销主持词
2015/07/03 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书