使用 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延迟加载
Mar 09 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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中call_user_func函数使用注意事项
2014/11/21 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
python实现定时播放mp3
2015/03/29 Python
Python正则简单实例分析
2017/03/21 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
寒假实习自荐信
2014/01/26 职场文书
公司活动总结范文
2014/07/01 职场文书
车辆年检委托书范本
2014/10/14 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
使用Python开发冰球小游戏
2022/04/30 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS