快捷導(dǎo)航

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

更新時間：2017年02月20日 09:40:28 作者：虛若影

本文主要介紹了JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接，避開已存在的鏈接和alt、title中的關(guān)鍵詞的方法。下面跟著小編一起來看下吧

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

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

這個問題不是簡單的一個批量replace那么簡單，要考慮到已經(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="九寨溝圖片" />

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

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

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

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

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

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

廢話不多說，最后給出一個完整的批量替換實例：

<!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>無標(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>

替換后的效果：