文本高亮显示jQuery插件
使用jquery扩展实现文本高亮显示,可用于搜索结果高亮显示、文章内搜索关键字的功能。

1. 查找文字并高亮显示的jquery代码
$("div").highlight("搜索的文字", "高亮代码的样式表");
2. 去除高亮现实的代码
$("div").removeHighlight("高亮代码的样式表");
<!DOCTYPE html> <html> <head> <title>AB叔</title> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.highlight-4.js"></script> <style> .searchWord{color: #dd4b39;} .searchWord2{background-color: yellow;} </style> </head> <body> <div> </div> <INPUT TYPE="text" id="searchKey"> <INPUT TYPE="button" VALUE="搜索" ONCLICK="search()"> <INPUT TYPE="button" VALUE="取消高亮" ONCLICK="removehighlight()"> <script> var highlightCss = "searchWord2"; function search(){ if($("#searchKey").val()!=""){ removehighlight(); $("div").highlight($("#searchKey").val(), highlightCss); } } function removehighlight(){ $("div").removeHighlight(highlightCss); } </script> </body> </html>