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 13 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
angular共享依赖的解决方案分享
Oct 15 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
requireJS使用指南
2016/04/27 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
python 实现端口扫描工具
2020/12/18 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
渔夫的故事教学反思
2014/02/14 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年母亲节寄语
2015/03/23 职场文书
销售开票员岗位职责
2015/04/15 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
Python实现Hash算法
2022/03/18 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers