基于jquery的给文章加入关键字链接

开始技术部门打算在后台添加或者修改文章的时候，把文章里面的关键字替换为<a>标签。但是这样就出现一些问题
如果新添加一个关键字，是不是所有的文章又要重新过滤一边。把新关键字替换掉。
如果修改了关键字的名字或者是修改了关键字的链接地址，那么又要重新过滤所有文件。
综合了一些情况后，感觉使用后台解决的方案行不通。于是我想到了前台脚本解决
思路：
关键字链接的信息任然存放在数据库中，在数据库中有一些字段来保存关键字的信息。
当用户添加，删除，更新关键字的时候，在后台生成一个js文件，格式如下：

var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"https://3water.com","WordLinkName":"你大爷21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://sc.3water.com","WordLinkName":"电脑"}]'

wordlinkdata变量存放一些json数据，这些数据是第二步的操作生成的。"WordLinkAlias"指的是关键词的名称，"WordLinkUrl"是关键字的链接。
在前台页面引用我们生成的js文件，我工作中使用的是jquery库。我们需要做工作是替换文章中所有的关键字 。这样，我们就需要用wordlinkdata的数据不断的循环判断。

$(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扩展是一个高亮扩展，我修改了一下，用来满足需求，如果你需要修改链接的样式，或者想自己创建别的元素，你可以修改以下的代码

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

不过这个方法的缺陷是，当关键字过多的时候（超过150个），页面的速度会下降
总结：这种方式的优势是，不需要对以前的文章做任何的修改，添加，删除，修改很灵活
缺点是：一旦关键字太多，速度会下降。
大家如果遇到过这种情况，可以探讨下。期待更好的解决方案