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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
jquery插件之easing使用
Aug 19 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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者的疑难问答(1)
2006/10/09 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python中的函数用法入门教程
2014/09/02 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
网络工程师的自我评价
2013/10/02 职场文书
工商干部先进事迹
2014/05/14 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
被告答辩状范文
2015/05/22 职场文书
信息技术国培研修日志
2015/11/13 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android