给文章加入关键字链接

         最近在做一个网站，遇到需要给网站内所有的文章加关键字链接的问题，我们在浏览一些网站的文章的时候，会发现文章里面的某些关键字是加了链接的，并且高亮显示。

         开始技术部门打算在后台添加或者修改文章的时候，把文章里面的关键字替换为<a>标签。但是这样就出现一些问题

        如果新添加一个关键字，是不是所有的文章又要重新过滤一边。把新关键字替换掉。

        如果修改了关键字的名字或者是修改了关键字的链接地址，那么又要重新过滤所有文件。

        综合了一些情况后，感觉使用后台解决的方案行不通。于是我想到了前台脚本解决

   思路：

         关键字链接的信息任然存放在数据库中，在数据库中有一些字段来保存关键字的信息。

         当用户添加，删除，更新关键字的时候，在后台生成一个js文件，格式如下：

　　

代码

var wordlinkdata = ' [{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"http://www.sohu1.com","WordLinkName":"你大爷21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://cnblogs.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个），页面的速度会下降

  总结：这种方式的优势是，不需要对以前的文章做任何的修改，添加，删除，修改很灵活

          缺点是：一旦关键字太多，速度会下降。

          大家如果遇到过这种情况，可以探讨下。期待更好的解决方案

转载于:https://www.cnblogs.com/zsbfree/archive/2010/10/26/1861228.html