JS批量替换内容中关键词为超链接


Posted in Javascript onFebruary 20, 2017

懂点seo的人都知道要给内容中关键词加上链接,形成站内锚文本链接,这对seo有很大的帮助。

思路就是在数据库中录入若干个关键词和关键词对应的链接,当然链接可以根据关键词的id自动生成,或者直接用关键词作为链接参数,如?tag=1、?kw=关键词。

这个问题不是简单的一个批量replace那么简单,要考虑到已经存在的超链接,不能将里面的文字再次替换为超链接,还有就是图片的alt属性,或者其他标签的title属性,里面的文字也不该被替换。

见下面的HTML代码:

【<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >九寨沟概要</a>】九寨沟位于四川省阿坝州九寨沟县境内,5A景点,世界自然遗产,有"五绝"之景色,我感到最绝的是海子,此生不能不去的景区。一年四季适合游,秋天是最美的。
<img src="" alt="九寨沟图片" title="九寨沟图片" />

这种情况你不能直接将九寨沟替换为超链接啊,不然第一个链接就会被替换为链接中包含链接,然后是图片上的alt和title也替换了一个链接上去,这肯定是不符合HTML规范的。

情景一:排除属性中的关键词

匹配的正则为:关键词[^<]*>,所以排除这个关键词的正则为:关键词?!([^<]*>)。

情景二:排除链接中的关键词

匹配的正则为:关键词[^<]*<\/a>,所以排除这个关键词的正则为:关键词?!([^<]*<\/a>)。

整合两种情况的结果为:var reg=/关键词(?!([^<]*>)|([^<]*<\/a>))/ig;

废话不多说,最后给出一个完整的批量替换实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="content">
【<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >九寨沟概要</a>】九寨沟位于四川省阿坝州九寨沟县境内,5A景点,世界自然遗产,有"五绝"之景色,我感到最绝的是海子,此生不能不去的景区。一年四季适合游,秋天是最美的。
<img src="" alt="九寨沟图片" title="九寨沟图片" />
</div>
<hr />
<div id="new">
</div>
<script>
var c=document.getElementById("content").innerHTML;
//var reg=/九寨沟(?!([^<]*>)|([^<]*<\/a>))/ig;
var json=[
  {'key':'九寨沟','url':'/九寨沟/'}
  ,{'key':'景点','url':'/景点/'}
  ,{'key':'景区','url':'/景区/'}
 ];
var reg;
for(var i=0;i<json.length;i++){
 var j=json[i];
 reg=new RegExp(j.key+"(?!([^<]*>)|([^<]*<\/a>))","ig");
 c = c.replace(reg,"<a href='"+j.url+"'>"+j.key+"</a>");
}
document.getElementById("new").innerHTML=c;
</script>
</body>
</html>

替换后的效果:

JS批量替换内容中关键词为超链接

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 #Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
Js的MessageBox
2006/12/03 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
python根据文件大小打log日志
2014/10/09 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python实现支付宝转账接口
2019/05/07 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
学校安全管理责任书
2014/07/23 职场文书
家长学校教学计划
2015/01/19 职场文书
爱心募捐感谢信
2015/01/22 职场文书
党员年度个人总结
2015/02/14 职场文书
奖学金申请书(范文)
2019/08/14 职场文书