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


Posted in Javascript onOctober 26, 2010

开始技术部门打算在后台添加或者修改文章的时候,把文章里面的关键字替换为<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个),页面的速度会下降
总结:这种方式的优势是,不需要对以前的文章做任何的修改,添加,删除,修改很灵活
缺点是:一旦关键字太多,速度会下降。
大家如果遇到过这种情况,可以探讨下。期待更好的解决方案
Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 #Javascript
自写的一个jQuery圆角插件
Oct 26 #Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 #Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 #Javascript
jquery ui resizable bug解决方法
Oct 26 #Javascript
HTML Dom与Css控制方法
Oct 25 #Javascript
Dom在ajax技术中的作用说明
Oct 25 #Javascript
You might like
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
春季防火方案
2014/05/10 职场文书
生日庆典策划方案
2014/06/02 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android