欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2010年10月26日 13:35:30   作者：  
最近在做一個網(wǎng)站，遇到需要給網(wǎng)站內(nèi)所有的文章加關(guān)鍵字鏈接的問題，我們在瀏覽一些網(wǎng)站的文章的時候，會發(fā)現(xiàn)文章里面的某些關(guān)鍵字是加了鏈接的，并且高亮顯示。
開始技術(shù)部門打算在后臺添加或者修改文章的時候，把文章里面的關(guān)鍵字替換為<a>標簽。但是這樣就出現(xiàn)一些問題
如果新添加一個關(guān)鍵字，是不是所有的文章又要重新過濾一邊。把新關(guān)鍵字替換掉。
如果修改了關(guān)鍵字的名字或者是修改了關(guān)鍵字的鏈接地址，那么又要重新過濾所有文件。
綜合了一些情況后，感覺使用后臺解決的方案行不通。于是我想到了前臺腳本解決
思路：
關(guān)鍵字鏈接的信息任然存放在數(shù)據(jù)庫中，在數(shù)據(jù)庫中有一些字段來保存關(guān)鍵字的信息。
當用戶添加，刪除，更新關(guān)鍵字的時候，在后臺生成一個js文件，格式如下：
復制代碼 代碼如下:

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

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

$(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擴展是一個高亮擴展，我修改了一下，用來滿足需求，如果你需要修改鏈接的樣式，或者想自己創(chuàng)建別的元素，你可以修改以下的代碼
復制代碼 代碼如下:

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

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

相關(guān)文章

最新評論