使用 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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python创建日历实例
2014/08/21 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
详解Python发送邮件实例
2016/01/10 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python删除某个字符
2018/03/19 Python
Python pymongo模块用法示例
2018/03/31 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python