使用 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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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
德生PL660的电路分析和打磨
2021/03/02 无线电
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
php反射应用示例
2014/02/25 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
详解Node全局变量global模块
2017/09/28 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
python时间整形转标准格式的示例分享
2014/02/14 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Order by的几种用法
2013/06/16 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
应届生自荐信范文
2014/02/21 职场文书
运动会拉拉队口号
2014/06/09 职场文书
满月酒邀请函
2015/01/30 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
公司放假通知范文
2015/04/14 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python