替換鏈接文本為鏈接樣式

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í)體符&amp;了,但是他可以保留<br>換行這些,這樣下面轉(zhuǎn)換的時(shí)候就會(huì)出錯(cuò),所以獲取到html()之后我們把&amp;實(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í)體符&amp;而不是&,這樣在轉(zhuǎn)換成鏈接的時(shí)候也會(huì)出錯(cuò),所以建議用上面的方法,*/

c = c.replace(/&amp;/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">鏈接替換






最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容