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 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript几个易错点记录
Nov 26 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
JS 实现分页打印功能
May 16 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 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/01/02 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
经典导游欢迎词大全
2014/01/16 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
邀请函模板
2015/02/02 职场文书
离婚被告代理词
2015/05/23 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android