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 事件处理函数间的Event物件是否全等
Apr 08 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue路由权限校验功能的实现代码
Jun 07 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的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
python程序变成软件的实操方法
2019/06/24 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python标准库itertools的使用方法
2020/01/17 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
利用python实现逐步回归
2020/02/24 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
学习新党章思想汇报
2014/01/09 职场文书
外国人聘用意向书
2014/04/01 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
奖学金感谢信
2015/01/21 职场文书
转学证明范本
2015/06/19 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL