这篇文章主要介绍了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视频教程！