http://www.css88.com/archives/2484
這個是原作者鏈接
(function($){
$.fn.highLight = function(str) {
if(str == undefined || str ==" ") {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
} else {
$(this).each(function(){
elt = $(this).get(0);
elt.normalize();
$.each($.makeArray(elt.childNodes), function(i, node){
if(node.nodeType == 3) {
var searchnode = node;
var pos = searchnode.data.indexOf(str);
if(pos >= 0) {//查找
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = searchnode.splitText(pos);
var searchnode = middlebit.splitText(str.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
searchnode.parentNode.replaceChild(spannode, middlebit);
}
} else {
$(node).highLight(str);
}
})
})
}
return $(this);
}
})(jQuery);後來我發現在每一段文本里面，該算法只能替換一次關鍵字，也就是說，在一段文本里有兩個以上需要高亮顯示的關鍵字，只能第一個被高亮，於是我做了一下修改，使其可以高亮多個關鍵字
(function($)
{
$.fn.highLight = function(str)
{
if (str == undefined || str == " ")
{
return this.find("span.highlight").each(function()
{
this.parentNode.firstChild.nodeName;
with (this.parentNode)
{
replaceChild(this.firstChild, this);
normalize();
}
}).end();
}
else
{
$(this).each(function()
{
elt = $(this).get(0);
elt.normalize();
$.each($.makeArray(elt.childNodes), function(i, node)
{
if (node.nodeType == 3)
{
var searchnode = node;
var pos = searchnode.data.toUpperCase().indexOf(str.toUpperCase());
while (pos < searchnode.data.length)
{
if (pos >= 0)
{
var spannode = document.createElement('span');
spannode.className = 'keyword';
var middlebit = searchnode.splitText(pos);
var searchnode = middlebit.splitText(str.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
searchnode.parentNode.replaceChild(spannode, middlebit);
}
else
{
break;
}
pos = searchnode.data.toUpperCase().indexOf(str.toUpperCase());
}
}
else
{
$(node).highLight(str);
}
})
})
}
return $(this);
}
})(jQuery);但這個時候還有一個問題，就是如果我們有多個關鍵字需要高亮怎麼辦？我一開始是在上面的函數裏面做循環，但由於閉包的問題，我沒有解決，失敗了。
我目前的辦法是，先把多關鍵字做成字符串數組，然後循環數組，分別對各個關鍵字進行高亮。
最後給一段使用此插件的示例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
.keyword
{
color: red;
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script src="jquery.highlight.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#searchresponse').highLight();
$('#searchresponse').highLight("Google");
});
</script>
</head>
<body>
<Div id="searchresponse">
北京時間7月11日早間消息，在谷歌6月28日推出社交網絡服務Google+的一週之後，谷歌的市值一度上升206億美元。
<br/>
不過，摩根士丹利上週五下調了谷歌的評級，並指出谷歌可能無法通過Google+獲益，導致谷歌股價下跌。目前谷歌市值較Google+推出之前仍高158億美元。
<br/>
6月27日，谷歌的收盤價爲482.80美元，而7月7日爲546.60美元。以3.2225億股流通股計算，這意味着谷歌的市值增加了206億美元。不過到週五收盤時，谷歌股價又下跌至532美元。
<br/>
其他一些因素也對谷歌股價造成影響，例如谷歌核心搜索業務的表現，以及市場整體表現等。不過過去一週中，對谷歌來說最重要的事件就是社交網絡服務的推出。儘管Google+仍在有限的測試中，市場已經對該服務做出積極反應。
<br/>
如果谷歌CEO拉里·佩奇(Larry Page)能夠通過社交網絡使谷歌受益，那麼摩根士丹利屆時將會上調谷歌的評級。這將再次推動谷歌的市值增長。
<br/>
</div>
</body>
</html>