Angularjs实现搜索关键字高亮显示效果


Posted in Javascript onJanuary 17, 2017

需求分析:

根据关键字搜索网页内容,并且高亮显示内容中的关键字

细节分析:

 1、每次执行搜索操作,需清空上一次结果

 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况

代码思路:

利用正则表达式匹配关键字

使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span>

为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>>……等等的情况

所有匹配和替换操作只针对当前DOM元素中文本节点,通过递归函数遍历操作所有节点

前端框架:

angularjs^1.2.9

$scope.myData = '<div>woshihight<h2>womei<b>bbb</b>shihigh<span>haha</span></h2><span>1000pxhight</span><ul><li>1high</li><li>2hight span light hight< p></li></ul><a href="index.html">这个是链接地址hight</a></div>';
 $scope.myDataCp = angular.copy($scope.myData);
 $scope.key = '';
 $scope.searchKey = function() {
 if($scope.key != '') {
 searchHighLight($scope.key);
 }
 }
 function searchHighLight(key) {
 var _element = angular.element($scope.myDataCp);
 nodeRecursion(_element[0],key);
 var _htmlStr = _element[0].innerHTML.toString();
 _htmlStr = _htmlStr.replace(/_1000px_/g, '<span class="red">').replace(/_xp0001_/g, '</span>');
 $scope.myData = _htmlStr;
 }
 //循环遍历替换所有文本节点内容
 function nodeRecursion(e, key) {
 var reg = new RegExp(key, 'g');
 var _count = e.childNodes.length;
 for(var _i=0; _i < _count; _i++) {
 if(e.childNodes.item(_i).nodeType == 3) {
 var _str = e.childNodes.item(_i).data;
 if(_str.indexOf(key)!=-1) {
 _str = _str.replace(reg,'_1000px_'+key+'_xp0001_');
 }
 e.childNodes.item(_i).data = _str;
 } else {
 nodeRecursion(e.childNodes.item(_i), key);
 }
 }
 }

其他说明:

searchKey //点击搜索按钮调用该方法

$scope.myData 中的html字符串必须有一个根节点,比如这里的div

html页面中加载该html字段需要ng-bind-html指令,该指令需要加载ngSanitize模块

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
React Router基础使用
Jan 17 #Javascript
JavaScript自定义分页样式
Jan 17 #Javascript
javascript实现页面滚屏效果
Jan 17 #Javascript
javascript中递归的两种写法
Jan 17 #Javascript
基本DOM节点操作
Jan 17 #Javascript
React快速入门教程
Jan 17 #Javascript
javascript操作cookie
Jan 17 #Javascript
You might like
PHP 编程安全性小结
2010/01/08 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
说一说Python logging
2016/04/15 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python subprocess模块详细解读
2018/01/29 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python tornado上传文件的功能
2020/03/26 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
高中语文教学反思
2014/01/16 职场文书
《狼》教学反思
2014/03/02 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
公司承诺书格式
2014/05/21 职场文书
法人授权委托书范本
2014/09/17 职场文书
防汛工作情况汇报
2014/10/28 职场文书
高中教师个人总结
2015/02/10 职场文书
军训新闻稿范文
2015/07/17 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript