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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
JavaScript中变量提升机制示例详解
Dec 27 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python实现的RSS阅读器实例
2015/07/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
利用Python检测URL状态
2019/07/31 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python实现扫雷游戏
2020/03/03 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
汽车驾驶求职信
2013/10/25 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
文员求职信
2014/07/15 职场文书
销售经理岗位职责
2015/01/31 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
初中政治教师教学反思
2016/02/23 职场文书
德劲DE1108畅想
2021/04/22 无线电
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android