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 面向对象的之私有成员和公开成员
May 04 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
原生js实现回复评论功能
Jan 18 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
JS正则表达式常见用法实例详解
Jun 19 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
中国第一家无线电行
2021/03/01 无线电
PHP脚本的10个技巧(4)
2006/10/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
javascript中的事件代理初探
2014/03/08 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
python 实用工具状态机transitions
2020/11/21 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
趣味游戏活动方案
2014/02/07 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
入股合作协议书
2014/10/12 职场文书
事业单位考察材料范文
2014/12/25 职场文书
逃课检讨书
2015/01/26 职场文书
党员年度个人总结
2015/02/14 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
卫生主题班会
2015/08/14 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏