使用 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 相关文章推荐
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
javascript常用的方法整理
Aug 20 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python深入学习之装饰器
2014/08/31 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Python解惑之True和False详解
2017/04/24 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
大学军训感言800字
2014/02/27 职场文书
校园绿化美化方案
2014/06/08 职场文书
实验室的标语
2014/06/20 职场文书
旷工检讨书1000字
2015/01/01 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android