JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接

懂點(diǎn)seo的人都知道要給內(nèi)容中關(guān)鍵詞加上鏈接，形成站內(nèi)錨文本鏈接，這對(duì)seo有很大的幫助。

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁(yè)美工、網(wǎng)站程序員、網(wǎng)頁(yè)設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷人員及形象策劃。承接：成都網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

思路就是在數(shù)據(jù)庫(kù)中錄入若干個(gè)關(guān)鍵詞和關(guān)鍵詞對(duì)應(yīng)的鏈接，當(dāng)然鏈接可以根據(jù)關(guān)鍵詞的id自動(dòng)生成，或者直接用關(guān)鍵詞作為鏈接參數(shù)，如?tag=1、?kw=關(guān)鍵詞。

這個(gè)問(wèn)題不是簡(jiǎn)單的一個(gè)批量replace那么簡(jiǎn)單，要考慮到已經(jīng)存在的超鏈接，不能將里面的文字再次替換為超鏈接，還有就是圖片的alt屬性，或者其他標(biāo)簽的title屬性，里面的文字也不該被替換。

見下面的HTML代碼：

【<a  rel="external nofollow" rel="external nofollow" >九寨溝概要</a>】九寨溝位于四川省阿壩州九寨溝縣境內(nèi)，5A景點(diǎn)，世界自然遺產(chǎn)，有"五絕"之景色，我感到最絕的是海子，此生不能不去的景區(qū)。一年四季適合游，秋天是最美的。
<img src="" alt="九寨溝圖片" title="九寨溝圖片" />

這種情況你不能直接將九寨溝替換為超鏈接啊，不然第一個(gè)鏈接就會(huì)被替換為鏈接中包含鏈接，然后是圖片上的alt和title也替換了一個(gè)鏈接上去，這肯定是不符合HTML規(guī)范的。

情景一：排除屬性中的關(guān)鍵詞

匹配的正則為：關(guān)鍵詞[^<]*>，所以排除這個(gè)關(guān)鍵詞的正則為：關(guān)鍵詞?!([^<]*>)。

情景二：排除鏈接中的關(guān)鍵詞

匹配的正則為：關(guān)鍵詞[^<]*<\/a>，所以排除這個(gè)關(guān)鍵詞的正則為：關(guān)鍵詞?!([^<]*<\/a>)。

整合兩種情況的結(jié)果為：var reg=/關(guān)鍵詞(?!([^<]*>)|([^<]*<\/a>))/ig;

廢話不多說(shuō)，最后給出一個(gè)完整的批量替換實(shí)例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<div id="content">
【<a  rel="external nofollow" rel="external nofollow" >九寨溝概要</a>】九寨溝位于四川省阿壩州九寨溝縣境內(nèi)，5A景點(diǎn)，世界自然遺產(chǎn)，有"五絕"之景色，我感到最絕的是海子，此生不能不去的景區(qū)。一年四季適合游，秋天是最美的。
<img src="" alt="九寨溝圖片" title="九寨溝圖片" />
</div>
<hr />
<div id="new">
</div>
<script>
var c=document.getElementById("content").innerHTML;
//var reg=/九寨溝(?!([^<]*>)|([^<]*<\/a>))/ig;
var json=[
  {'key':'九寨溝','url':'/九寨溝/'}
  ,{'key':'景點(diǎn)','url':'/景點(diǎn)/'}
  ,{'key':'景區(qū)','url':'/景區(qū)/'}
 ];
var reg;
for(var i=0;i<json.length;i++){
 var j=json[i];
 reg=new RegExp(j.key+"(?!([^<]*>)|([^<]*<\/a>))","ig");
 c = c.replace(reg,"<a href='"+j.url+"'>"+j.key+"</a>");
}
document.getElementById("new").innerHTML=c;
</script>
</body>
</html>

替換后的效果：

JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

當(dāng)前文章：JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接
本文鏈接：http://www.aaarwkj.com/article22/pcsdjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、建站公司、微信小程序、品牌網(wǎng)站制作、網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接