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 29 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
什么是短波收听SWL
2021/03/01 无线电
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Python 正则表达式(转义问题)
2014/12/15 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python descriptor(描述符)的实现
2020/11/15 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
护理目标管理责任书
2014/07/25 职场文书
证婚人致辞精选
2015/07/28 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python