1.在前端的網(wǎng)頁(yè)輸出時(shí),我們的輸出的鏈接,比如百度:https://www.baidu.com,我們直接輸出的是html文本,那么當(dāng)我們想要把內(nèi)容輸出成鏈接的形式該怎么做呢?
<div class="box">
? ? ? ? ?<ul>
? ? ? ? ? ? ? ? ? ?<li>1.鏈接:https://www.baidu.com</li>
? ? ? ? ? ? ? ? ? ?<li>2.鏈接:https://www.baidu.com</li>
? ? ? ? ? ? ? ? ? ?<li>3.鏈接:https://www.baidu.com</li>
? ? ? ? </ul>
</div>
假如我們有如上面結(jié)構(gòu)的html,那么$(document).ready(function() { ??
var li=$(".box ?ul ? li");
var liLength=li.length;
var reg=/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
for(var I = 0;i<liLength;i++){
var c = $(li[I].html());
/*這個(gè)方法獲取到的比如包含有實(shí)體符&符的已經(jīng)被默認(rèn)轉(zhuǎn)換成了實(shí)體符&了,但是他可以保留<br>換行這些,這樣下面轉(zhuǎn)換的時(shí)候就會(huì)出錯(cuò),所以獲取到html()之后我們把&實(shí)體符轉(zhuǎn)換成鏈接包含的符號(hào)&,這樣既可以保留帶&鏈接的完整性,也可以保留<br>的換行效果*/
//var c = $(li[I].text());
/*當(dāng)遇到微擎之類的網(wǎng)站例如里面包含&符號(hào)之類的網(wǎng)站的時(shí)候,text()獲取到的是&,這樣不會(huì)出問(wèn)題,但是使用text()獲取文本之后會(huì)丟失數(shù)據(jù)庫(kù)加載過(guò)來(lái)的<br>換行這些,導(dǎo)致有換行的文本轉(zhuǎn)換成鏈接之后無(wú)法換行,如果我們使用html()方法獲取的時(shí)候如果有&,我們獲取到的就是實(shí)體符&而不是&,這樣在轉(zhuǎn)換成鏈接的時(shí)候也會(huì)出錯(cuò),所以建議用上面的方法,*/
c = c.replace(/&/g,'&');
c = c.replace( reg , "<a href='$1$2'> $1$2</a> ");
$(li[i]).html(c)
}?
2.上面的代碼執(zhí)行結(jié)果如下:


3.更多內(nèi)容參考張?chǎng)涡翊笈5?a target="_blank" rel="nofollow">鏈接替換