使用 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静态的url如何传递
May 03 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
实现vuex原理的示例
Oct 21 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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 auth_http类库进行身份效验
2009/03/19 PHP
php中的观察者模式
2010/03/24 PHP
php购物车实现代码
2011/10/10 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
js left,right,mid函数
2008/06/10 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序日历效果
2018/12/29 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python Json序列化与反序列化的示例
2018/01/31 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python使用tornado实现登录和登出
2018/07/28 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python实现名片管理系统
2020/02/14 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
给上级领导的感谢信
2015/01/22 职场文书
龙门石窟导游词
2015/02/02 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
学生会部长竞选稿
2015/11/19 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
python中的被动信息搜集
2021/04/29 Python