jQuery实现高亮显示网页关键词的方法


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下:

这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你输入的内容,也就是关键字,那么这些关键字是会高亮显示的,被动态添加成黄色,看上去很醒目,就像百度快照显示关键词的样子。

运行效果如下图所示:

jQuery实现高亮显示网页关键词的方法

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字高亮显示</title>
<style type="text/css">
.highlight {
  background-color: #fff34d;
  -moz-border-radius: 5px; /* FF1+ */
  -webkit-border-radius: 5px; /* Saf3-4 */
  border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight {
  padding:1px 4px;
  margin:0 -4px;
}
</style>
</head>
<body>
Search: <input type="text" id="text-search" />
<p>This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social ntwork services.</p>
(Text from Wikipedia)
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
 var skip = 0;
 if (node.nodeType == 3) {
  var pos = node.data.toUpperCase().indexOf(pat);
  if (pos >= 0) {
  var spannode = document.createElement('span');
  spannode.className = 'highlight';
  var middlebit = node.splitText(pos);
  var endbit = middlebit.splitText(pat.length);
  var middleclone = middlebit.cloneNode(true);
  spannode.appendChild(middleclone);
  middlebit.parentNode.replaceChild(spannode, middlebit);
  skip = 1;
  }
 }
 else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
  for (var i = 0; i < node.childNodes.length; ++i) {
  i += innerHighlight(node.childNodes[i], pat);
  }
 }
 return skip;
 }
 return this.each(function() {
 innerHighlight(this, pat.toUpperCase());
 });
};
jQuery.fn.removeHighlight = function() {
 function newNormalize(node) {
  for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
    var child = children[i];
    if (child.nodeType == 1) {
      newNormalize(child);
      continue;
    }
    if (child.nodeType != 3) { continue; }
    var next = child.nextSibling;
    if (next == null || next.nodeType != 3) { continue; }
    var combined_text = child.nodeValue + next.nodeValue;
    new_node = node.ownerDocument.createTextNode(combined_text);
    node.insertBefore(new_node, child);
    node.removeChild(child);
    node.removeChild(next);
    i--;
    nodeCount--;
  }
 }
return this.find("span.highlight").each(function() {
  var thisParent = this.parentNode;
  thisParent.replaceChild(this.firstChild, this);
  newNormalize(thisParent);
 }).end();
};
</script>
<script type="text/javascript">
$(function() {
  $('#text-search').bind('keyup change', function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $('body').removeHighlight();
    // disable highlighting if empty
    if ( searchTerm ) {
      // highlight the new term
      $('body').highlight( searchTerm );
    }
  });
});
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
vue双向绑定简要分析
Mar 23 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
You might like
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
浅谈javascript获取元素transform参数
2015/07/24 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python删除文件示例分享
2014/01/28 Python
Python编写检测数据库SA用户的方法
2014/07/11 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
厂长助理岗位职责
2013/12/27 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS