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

2019-11-19 17:30:03

字體：大中小

供稿：網(wǎng)友

懂點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景點，世界自然遺產(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景點，世界自然遺產(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>

替換后的效果：