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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 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 strtok()函数的优点分析
2010/03/02 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
常用的JS验证和函数汇总
2014/12/23 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python中异常捕获方法详解
2017/03/03 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
校园活动策划书范文
2014/01/10 职场文书
初中音乐教学反思
2014/01/12 职场文书
卫生安全检查制度
2014/02/04 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers