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面向对象入门基础详细介绍
Sep 05 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
PHP守护进程实例
Mar 06 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python 创建一维的0向量实例
2019/12/02 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
C语言面试题
2015/10/30 面试题
半年思想汇报
2013/12/30 职场文书
小学英语教学反思
2014/01/30 职场文书
学生生病请假条范文
2014/02/16 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
继承公证书
2014/04/09 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
工作会议通知
2015/04/15 职场文书
学校德育工作总结2015
2015/05/11 职场文书
青年志愿者活动感想
2015/08/07 职场文书