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 miscellanea -display data real time, using window.status
Jan 09 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
js实现简单进度条效果
Mar 25 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中的数组操作函数整理
2008/08/18 PHP
php 时间计算问题小结
2009/01/04 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python实现简易动态时钟
2018/11/19 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
教研活动总结
2014/04/28 职场文书
党员目标管理责任书
2014/07/25 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
现役军人家属慰问信
2015/03/24 职场文书
城南旧事观后感
2015/06/11 职场文书