快捷導(dǎo)航

基于jquery的給文章加入關(guān)鍵字鏈接

更新時(shí)間：2010年10月26日 13:35:30 作者：

最近在做一個(gè)網(wǎng)站，遇到需要給網(wǎng)站內(nèi)所有的文章加關(guān)鍵字鏈接的問(wèn)題，我們?cè)跒g覽一些網(wǎng)站的文章的時(shí)候，會(huì)發(fā)現(xiàn)文章里面的某些關(guān)鍵字是加了鏈接的，并且高亮顯示。

開(kāi)始技術(shù)部門(mén)打算在后臺(tái)添加或者修改文章的時(shí)候，把文章里面的關(guān)鍵字替換為<a>標(biāo)簽。但是這樣就出現(xiàn)一些問(wèn)題
如果新添加一個(gè)關(guān)鍵字，是不是所有的文章又要重新過(guò)濾一邊。把新關(guān)鍵字替換掉。
如果修改了關(guān)鍵字的名字或者是修改了關(guān)鍵字的鏈接地址，那么又要重新過(guò)濾所有文件。
綜合了一些情況后，感覺(jué)使用后臺(tái)解決的方案行不通。于是我想到了前臺(tái)腳本解決
思路：
關(guān)鍵字鏈接的信息任然存放在數(shù)據(jù)庫(kù)中，在數(shù)據(jù)庫(kù)中有一些字段來(lái)保存關(guān)鍵字的信息。
當(dāng)用戶(hù)添加，刪除，更新關(guān)鍵字的時(shí)候，在后臺(tái)生成一個(gè)js文件，格式如下：

復(fù)制代碼代碼如下:

 
var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"http://www.fzitv.net","WordLinkName":"你大爺21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://sc.jb51.net","WordLinkName":"電腦"}]' 

wordlinkdata變量存放一些json數(shù)據(jù)，這些數(shù)據(jù)是第二步的操作生成的。"WordLinkAlias"指的是關(guān)鍵詞的名稱(chēng)，"WordLinkUrl"是關(guān)鍵字的鏈接。
在前臺(tái)頁(yè)面引用我們生成的js文件，我工作中使用的是jquery庫(kù)。我們需要做工作是替換文章中所有的關(guān)鍵字。這樣，我們就需要用wordlinkdata的數(shù)據(jù)不斷的循環(huán)判斷。

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
AddWordLink(); 
}); 
function AddWordLink(){ 
//給特殊詞加上鏈接 
if (wordlinkdata != undefined && wordlinkdata != null) { 
var content = $(".divArtContent"); 
if (content != null) { 
var myobject = eval('(' + wordlinkdata + ')'); 
for (var i = 0; i < myobject.length; i++) { 
content.highLight(myobject[i].WordLinkName, myobject[i].WordLinkUrl); 
} 
} 
} 
} 
(function($) { 
$.fn.highLight = function(str, url) { 
if (str == undefined || str == " ") { 
return this.find("a.divArtContentAlink").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('a'); 
spannode.className = 'divArtContentAlink'; 
spannode.href = url; 
spannode.target = 'blank'; 
var middlebit = searchnode.splitText(pos); 
var searchnode = middlebit.splitText(str.length); 
var middleclone = middlebit.cloneNode(true); 
spannode.appendChild(middleclone); 
if (searchnode.parentNode != undefined) 
searchnode.parentNode.replaceChild(spannode, middlebit); 
} 
} else { 
$(node).highLight(str, url); 
} 
}) 
}) 
} 
return $(this); 
} 
})(jQuery); 

$.fn.highLight擴(kuò)展是一個(gè)高亮擴(kuò)展，我修改了一下，用來(lái)滿(mǎn)足需求，如果你需要修改鏈接的樣式，或者想自己創(chuàng)建別的元素，你可以修改以下的代碼

復(fù)制代碼代碼如下:

 
var spannode = document.createElement('a'); 
spannode.className = 'divArtContentAlink'; 
spannode.href = url; 
spannode.target = 'blank'; 

不過(guò)這個(gè)方法的缺陷是，當(dāng)關(guān)鍵字過(guò)多的時(shí)候（超過(guò)150個(gè)），頁(yè)面的速度會(huì)下降
總結(jié)：這種方式的優(yōu)勢(shì)是，不需要對(duì)以前的文章做任何的修改，添加，刪除，修改很靈活
缺點(diǎn)是：一旦關(guān)鍵字太多，速度會(huì)下降。
大家如果遇到過(guò)這種情況，可以探討下。期待更好的解決方案

您可能感興趣的文章: