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

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


代码如下:

var wordlinkdata='[{"WordLinkAlias":"wordlinkReplace4","WordLinkUrl":"http://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个),页面的速度会下降
总结:这种方式的优势是,不需要对以前的文章做任何的修改,添加,删除,修改很灵活
缺点是:一旦关键字太多,速度会下降。
大家如果遇到过这种情况,可以探讨下。期待更好的解决方案

(0)

相关推荐

  • JS实现关键字搜索时的相关下拉字段效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" rel="external nofollow" rel=

  • 用JS让文章内容指定的关键字加亮

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现... 不知道怎样来实现这样的功能啊?特此求助 txt.innerHTML = txt.innerHTML.replace(/文章/gi,"文章"); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 多关键词 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:

  • 基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • JQuery+JS实现仿百度搜索结果中关键字变色效果

    1.源码 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#btn_1").click(function() { var $keyword = $("#Text1").val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); function setHeightKeyWord(id, keyword

  • Python抓取淘宝下拉框关键词的方法

    本文实例讲述了Python抓取淘宝下拉框关键词的方法.分享给大家供大家参考.具体如下: import urllib2,re for key in open('key.txt'): do = "http://suggest.taobao.com/sug?code=utf-8&q=%s" % key.rstrip() _re = re.findall('\[\"(.*?)\",\".*?\"\]',urllib2.urlopen(do).re

  • 一个对于js this关键字的问题

    所以拿出来与大家共勉: 先运行以下的js代码 <script> foo = {  'bar': function () {  alert(this);  },  'toString': function () {  return 'foo';  } }; foo.bar();//返回的是"foo" (foo.bar)();//返回的是"[object Window]" (foo.bar || null)();//返回的是"[object Win

  • jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现

    关键字"拖曳搜索"之"拖曳"功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键字到右边框里面 也可以在输入框里输入自定义关键字到下面框 即可搜索 如果去掉不需要的关键词 搜索时 把不需要的关键词从右边框拖曳回到左边 即可 无论原来还是自定义加入的关键词 如果已存在 她会提示... 实现: 复制代码 代码如下: <script type="text/javascript" src=&qu

  • jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

  • jquery 结合C#后台的数组对文章的关键字自动添加链接的代码

    当我们需要在后台读取多个关键字时,我们可以先把后台的数据库读取到一个数组中(在数据库添加多个关键词时用","隔开): 复制代码 代码如下: public string[] str; //添加一个公共数组一遍jquery调用 protected void Page_Load(object sender, EventArgs e) { string str1 = 读取数据库的关键词; str=str1.Split(','); } 页面的JQuery: <html s> <

  • 仿百度的关键词匹配搜索示例

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关键词匹配搜索仿百度</title> <meta name="description" content=" 内容介绍不超过10

  • Jquery 高亮显示文本中重要的关键字

    一.界面预览 鼠标放到右边的Tab按钮上,文字透明度降低,同时一段文字高亮显示,效果如下: Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus/ 很绚丽的效果幺! 二.实现原理 将要高亮显示的文字加上<span>段落标记, class="mask"的div 做为遮罩层,使此遮罩层位于文字内容之上(z-index属性,使用Jquery给段落动态添加样式类.三.HTML代码 复制代码 代码如下: <div clas

随机推荐