基于jquery的给文章加入关键字链接
更新时间:2010年10月26日 13:35:30 作者:
最近在做一个网站,遇到需要给网站内所有的文章加关键字链接的问题,我们在浏览一些网站的文章的时候,会发现文章里面的某些关键字是加了链接的,并且高亮显示。
开始技术部门打算在后台添加或者修改文章的时候,把文章里面的关键字替换为<a>标签。但是这样就出现一些问题
如果新添加一个关键字,是不是所有的文章又要重新过滤一边。把新关键字替换掉。
如果修改了关键字的名字或者是修改了关键字的链接地址,那么又要重新过滤所有文件。
综合了一些情况后,感觉使用后台解决的方案行不通。于是我想到了前台脚本解决
思路:
关键字链接的信息任然存放在数据库中,在数据库中有一些字段来保存关键字的信息。
当用户添加,删除,更新关键字的时候,在后台生成一个js文件,格式如下:
var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"https://www.jb51.net","WordLinkName":"你大爷21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://sc.jb51.net","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个),页面的速度会下降
总结:这种方式的优势是,不需要对以前的文章做任何的修改,添加,删除,修改很灵活
缺点是:一旦关键字太多,速度会下降。
大家如果遇到过这种情况,可以探讨下。期待更好的解决方案
如果新添加一个关键字,是不是所有的文章又要重新过滤一边。把新关键字替换掉。
如果修改了关键字的名字或者是修改了关键字的链接地址,那么又要重新过滤所有文件。
综合了一些情况后,感觉使用后台解决的方案行不通。于是我想到了前台脚本解决
思路:
关键字链接的信息任然存放在数据库中,在数据库中有一些字段来保存关键字的信息。
当用户添加,删除,更新关键字的时候,在后台生成一个js文件,格式如下:
复制代码 代码如下:
var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"https://www.jb51.net","WordLinkName":"你大爷21"},{"WordLinkAlias":"wordlinkReplace7","WordLinkUrl":"http://sc.jb51.net","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个),页面的速度会下降
总结:这种方式的优势是,不需要对以前的文章做任何的修改,添加,删除,修改很灵活
缺点是:一旦关键字太多,速度会下降。
大家如果遇到过这种情况,可以探讨下。期待更好的解决方案
相关文章
jQuery的3种请求方式$.post,$.get,$.getJSON
这篇文章主要介绍了jQuery的3种请求方式$.post,$.get,$.getJSON,需要的朋友可以参考下2014-03-03EasyUI中datagrid在ie下reload失败解决方案
这篇文章主要介绍了EasyUI中datagrid在ie下reload失败解决方案,结合网上搜集来的几种方案,最终解决了这个问题,分享给大家,希望对大家能够有所帮助。2015-03-03JQuery一种取同级值的方式(比如你在GridView中)
JQuery一种取同级值的方式 比如你在GridView中,实现代码如下,需要的朋友可以参考下2012-03-03PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
这篇文章主要介绍了PHP+MySQL+jQuery随意拖动层并即时保存拖动位置的实现方法,感兴趣的小伙伴们可以参考一下2015-10-10jQuery插件easyUI实现通过JS显示Dialog的方法
这篇文章主要介绍了jQuery插件easyUI实现通过JS显示Dialog的方法,实例分析了jQuery插件easyUI弹出Dialog的具体实现技巧,需要的朋友可以参考下2016-09-09
最新评论