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 相关文章推荐
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python 对key为时间的dict排序方法
2018/10/17 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python @property原理解析和用法实例
2020/02/11 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
法律专业推荐信范文
2013/11/29 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
初中班主任评语
2014/04/24 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
硕士学位论文评语
2014/12/31 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书