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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
javascript实现移动端轮播图
Dec 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
python中实现精确的浮点数运算详解
2017/11/02 Python
python3.7.0的安装步骤
2018/08/27 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python爬虫添加请求头代码实例
2019/12/28 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
贸易经济专业自荐书
2014/06/29 职场文书
农行心得体会
2014/09/02 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL