使用 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 相关文章推荐
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
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递归实现无限分类的方法
2015/07/28 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
js常用排序实现代码
2010/12/28 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python 对象中的数据类型
2017/05/13 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python中判断文件结束符的具体方法
2020/08/04 Python
一套PHP的笔试题
2013/05/31 面试题
《油菜花开了》教学反思
2014/02/22 职场文书
法人代表委托书
2014/04/04 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers