使用 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 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JavaScript Prototype对象
2009/01/07 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
Vue的props父传子的示例代码
2020/05/20 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python实现身份证号码解析
2015/09/01 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python自定义线程类简单示例
2018/03/23 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
求职推荐信范文
2013/12/01 职场文书
九年级家长会邀请函
2014/01/15 职场文书
商场中秋节广播稿
2014/01/17 职场文书
党员干部一句话承诺
2014/05/30 职场文书
学生偷窃检讨书
2014/09/25 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
西柏坡观后感
2015/06/08 职场文书
工作态度怎么写
2015/06/25 职场文书
运动会通讯稿600字
2015/07/20 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
深入浅析React中diff算法
2021/05/19 Javascript