jQuery实现高亮显示网页关键词的方法

2019-11-20 11:53:20

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery实现网页抖动的菜单抖动效果

下一篇：jQuery实现信息提示框(带有圆角框与动画)效果