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 相关文章推荐
GRID拖拽行的实例代码
Jul 18 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
jQuery.each使用详解
Jul 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP内存缓存Memcached类实例
2014/12/08 PHP
php技巧小结【推荐】
2017/01/19 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
2014年组织部工作总结
2014/11/14 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
如何写观后感
2015/06/19 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript