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的函数重名看其初始化方式
Mar 08 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
微信小程序实现批量倒计时功能
Nov 01 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手册及PHP编程标准
2006/12/17 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
django框架如何集成celery进行开发
2017/05/24 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
财务会计专业推荐信
2013/11/30 职场文书
5.1手机促销活动
2014/01/17 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
西柏坡导游词
2015/02/05 职场文书
天那边观后感
2015/06/09 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis