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 相关文章推荐
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
微信小程序实现抖音播放效果的实例代码
Apr 11 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中两个float(浮点数)比较实例分析
2015/09/27 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
详谈javascript精度问题与调整
2017/07/08 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python绘制汉诺塔
2021/03/01 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Python如何定义一个函数
2015/09/01 面试题
军训考核自我鉴定
2014/02/13 职场文书
海飞丝的广告词
2014/03/20 职场文书
个人担保书格式范文
2014/05/12 职场文书
经典祝酒词大全
2015/08/12 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书