使用 js+正則表達(dá)式為關(guān)鍵詞添加鏈接
要求把一段html腳本中的疾病名添加到疾病庫(kù)的鏈接,只添加一次,要避開(kāi)超鏈接或圖片鏈接。
最初是用的 str.replace('糖尿病', '<a href=...>糖尿病</a>');
結(jié)果找了半天,愣是沒(méi)找到替換后的效果,原來(lái)是有個(gè)圖片的title中包含糖尿病,被它捷足先登了。
因此要把<a>鏈接、<img>標(biāo)簽避開(kāi),但<p><div>等標(biāo)簽不用避開(kāi)
上圖:

s = "<a >先看一個(gè)糖尿病病歷</a> <br/>" +
"<IMG style='vertical-align:middle' width=40 src='http://yx129.com/api/minisite/images/skin/green/doctor_thumb_100.png'/>糖尿病王醫(yī)生<br/>" +
"糖尿病簡(jiǎn)介<br/>糖尿病發(fā)病率<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類標(biāo)簽全部替換為{{index}},然后處理剩下的文字,再把<a><img>標(biāo)簽的內(nèi)容替換回去
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' );
document.write('<br>-------------------------<br>第2步:添加疾病庫(kù)鏈接后:<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+正則表達(dá)式為關(guān)鍵詞添加鏈接的全部代碼了,簡(jiǎn)單吧,有需要的小伙伴可以參考下
- 實(shí)例分析js和C#中使用正則表達(dá)式匹配a標(biāo)簽
- 用Javascript正則實(shí)現(xiàn)url鏈接的解析類
- Javascript 獲取鏈接(url)參數(shù)的方法[正則與截取字符串]
- node.js正則表達(dá)式獲取網(wǎng)頁(yè)中所有鏈接的代碼實(shí)例
- javascript 獲取鏈接文件地址中第一個(gè)斜線內(nèi)的正則表達(dá)式
- 刪除javascript中注釋語(yǔ)句的正則表達(dá)式
- javascript中使用正則表達(dá)式實(shí)現(xiàn)刪除字符串中的前后空格
- Java/Js下使用正則表達(dá)式匹配嵌套Html標(biāo)簽
- JavaScript正則替換HTML標(biāo)簽功能示例
- JavaScript正則表達(dá)式匹配 div style標(biāo)簽
- JavaScript實(shí)現(xiàn)正則去除a標(biāo)簽并保留內(nèi)容的方法【測(cè)試可用】
相關(guān)文章
yii form 表單提交之前JS在提交按鈕的驗(yàn)證方法
很多時(shí)候,需要對(duì)Yii表單model中的對(duì)象設(shè)置的rules進(jìn)行判斷,但是有的時(shí)候可能需要在提交之前就在客戶端進(jìn)行驗(yàn)證。怎么處理呢?接下來(lái)通過(guò)本文給大家分享yii form 表單提交之前JS在提交按鈕的驗(yàn)證方法,需要的的朋友參考下2017-03-03
JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
連續(xù)操作HTMLElement對(duì)象圖文解決方法
Object.prototype.***不能用作在HTMLElement對(duì)象上,如本后面的抓圖所示。2008-03-03
Extjs4中tree的拖拽功能(可以兩棵樹(shù)之間拖拽) 簡(jiǎn)單實(shí)例
這篇文章主要介紹了Extjs4中tree的拖拽功能簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-12-12
js防抖-節(jié)流函數(shù)的基本實(shí)現(xiàn)和補(bǔ)充詳解
這篇文章主要介紹了防抖-節(jié)流函數(shù)的基本實(shí)現(xiàn)和補(bǔ)充,文章從基礎(chǔ)概念到手寫(xiě)對(duì)防抖-節(jié)流函數(shù)的實(shí)現(xiàn)進(jìn)行講解,內(nèi)容詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
JS+CSS實(shí)現(xiàn)模仿瀏覽器網(wǎng)頁(yè)字符查找功能的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)模仿瀏覽器網(wǎng)頁(yè)字符查找功能的方法,實(shí)例分析了javascript實(shí)現(xiàn)查找功能的樣式及相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
javascript同步服務(wù)器時(shí)間和同步倒計(jì)時(shí)小技巧
本文給出如何在頁(yè)面上同步顯示服務(wù)器時(shí)間的解決方案,能夠?qū)崿F(xiàn)同步服務(wù)器時(shí)間、同步倒計(jì)時(shí),卻不占用服務(wù)器太多資源,下面我給寫(xiě)出實(shí)現(xiàn)的思路2015-09-09
將函數(shù)的實(shí)際參數(shù)轉(zhuǎn)換成數(shù)組的方法
實(shí)際參數(shù)在函數(shù)中我們可以使用 arguments 對(duì)象獲得 (注:形參可通過(guò) arguments.callee 獲得),雖然 arguments 對(duì)象與數(shù)組形似,但仍不是真正意義上的數(shù)組。2010-01-01

