JS批量替換內容中關鍵詞為超鏈接

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

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

懂點seo的人都知道要給內容中關鍵詞加上鏈接，形成站內錨文本鏈接，這對seo有很大的幫助。

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

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

見下面的HTML代碼：

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

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

情景一：排除屬性中的關鍵詞

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

情景二：排除鏈接中的關鍵詞

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

整合兩種情況的結果為：var reg=/關鍵詞(?!([^<]*>)|([^<]*<\/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>無標題文檔</title>
</head>
<body>
<div id="content">
【<a  rel="external nofollow" rel="external nofollow" >九寨溝概要</a>】九寨溝位于四川省阿壩州九寨溝縣境內，5A景點，世界自然遺產(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':'景點','url':'/景點/'}
  ,{'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>

替換后的效果：