使用 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解析xml字符串简单示例
Apr 11 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
Element Steps步骤条的使用方法
Jul 26 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 Mysql日期和时间函数集合
2007/11/16 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python 多线程Threading初学教程
2017/08/22 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
村委会贫困证明
2014/01/14 职场文书
小加工厂管理制度
2014/01/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
物业保安岗位职责
2014/07/02 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
女性励志书籍推荐
2019/08/19 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python