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 相关文章推荐
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
python求前n个阶乘的和实例
2020/04/02 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
两道JAVA笔试题
2016/09/14 面试题
方正Java笔试题
2014/07/03 面试题
求职自荐信
2013/12/14 职场文书
工作总结与自我评价
2014/09/18 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
2014年教研员工作总结
2014/12/23 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL