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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js日期相关函数总结分享
Oct 15 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python删除文本中行数标签的方法
2018/05/31 Python
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
中秋客户感谢信
2015/01/22 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
大国崛起观后感
2015/06/02 职场文书
民主生活会意见
2015/06/05 职场文书
KTV员工管理制度
2015/08/06 职场文书
员工担保书范本
2015/09/22 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Python天气语音播报小助手
2021/09/25 Python