使用 js+正则表达式为关键词添加链接


Posted in Javascript onNovember 11, 2014

要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接。

最初是用的    str.replace('糖尿病', '<a href=...>糖尿病</a>');

结果找了半天,愣是没找到替换后的效果,原来是有个图片的title中包含糖尿病,被它捷足先登了。

因此要把<a>链接、<img>标签避开,但<p><div>等标签不用避开

上图:

使用 js+正则表达式为关键词添加链接

 s = "<a href='http://www.yx129.com/bingli/1_310.html'>先看一个糖尿病病历</a> <br/>" +  

         "<IMG style='vertical-align:middle' width=40 src='http://yx129.com/api/minisite/images/skin/green/doctor_thumb_100.png'/>糖尿病王医生<br/>" +  

         "糖尿病简介<br/>糖尿病发病率<br/><a href='baidu.com'>糖尿病症状<br/>" +  

         "</a> ";  

 document.write(s);  

   

 a_reg = /<a(.*?)<\/a>/i;  //a链接的正则  

 img_reg = /<img(.*?)>/i; //图片链接的正则,防止图片的title,alt什么的属性包括疾病名而误替换  

 var ix = 0;  

   

 var arr_ele = [];  

 //先把<a><img>2类标签全部替换为{{index}},然后处理剩下的文字,再把<a><img>标签的内容替换回去  

 while(true){  

    if(-1 == s.toLowerCase().indexOf('<a ') && -1 == s.toLowerCase().indexOf('<img ')){  

        break;  

    }  

    a_match = s.match(a_reg);  

    if(a_match){  

        //console.log(a_match);  

        arr_ele.push(a_match[0]);  

        s = s.replace(a_reg, '{{' +ix+ '}}');  

        ix++;  

    }  

    img_match = s.match(img_reg);  

    if(img_match){  

        //console.log(img_match);  

        arr_ele.push(img_match[0]);  

        s = s.replace(img_reg, '{{' +ix+ '}}');  

        ix++;  

    }  

    console.log(s);  

}  

  

document.write('<br>-------------------------<br>第1步:把链接替换为{{index}}后:<br>'+s+'<br>');  

  

s = s.replace(/糖尿病/i, "<a target='_blank' href='http://jibing.yx129.com/tnb'>糖尿病</a>");  

  

document.write('<br>-------------------------<br>第2步:添加疾病库链接后:<br>'+s+'<br>');  

  

if(arr_ele){  

    for(var i=0; i<arr_ele.length; i++){  

        s = s.replace('{{' + i + '}}', arr_ele[i]);  

    }  

}  

  

document.write('<br>-------------------------<br>第3步:把链接替换回去之后:<br>'+s+'<br>');

以上就是使用 js+正则表达式为关键词添加链接的全部代码了,简单吧,有需要的小伙伴可以参考下

Javascript 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
vue组件与复用详解
Apr 08 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
jQuery 动态云标签插件
Nov 11 #Javascript
javascript 回调函数详解
Nov 11 #Javascript
JSON格式化输出
Nov 10 #Javascript
再谈javascript原型继承
Nov 10 #Javascript
让angularjs支持浏览器自动填表
Nov 10 #Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 #Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 #Javascript
You might like
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
在centos7中分布式部署pyspider
2017/05/03 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python中实现字符串翻转的方法
2018/07/11 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Django choices下拉列表绑定实例
2020/03/13 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
python中实现栈的三种方法
2020/12/19 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
应届生高等护理求职信
2013/10/12 职场文书
医学生职业规划范文
2014/01/05 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
社区国庆节活动总结
2015/03/23 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
摩登时代观后感
2015/06/03 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python