一、天生我材必有用

給http字符自動添加URL鏈接是比較常見的一項功能。舉兩個我最近常用到的自動檢測http://地址并添加鏈接的例子吧，首先是QQ郵箱，在使用QQ郵箱時，如果輸入了URL地址(http://或是https://開頭)，則QQ郵箱會自動給這個地址添加可打開的鏈接。如下圖所示：

還有就是微博客產(chǎn)品，例如twitter(zxx://FQ可以follow蒼井空姐姐哦~~ ^_^)，或是國產(chǎn)的新浪微博。當(dāng)您的微博信息中有類似于http://www.zhangxinxu.com/的URL地址時，當(dāng)信息發(fā)布后，這些地址會自動可鏈接，而不單單是個普通文字而已，見下面的測試：

當(dāng)這段信息發(fā)布后，顯示為：

當(dāng)我的粉絲點擊這個鏈接的時候就可以訪問我的這篇文章了。

二、URL地址自動添加的實現(xiàn)

URL地址自動添加的實現(xiàn)其實就是那么點內(nèi)容：檢測與替換。

檢測
“檢測”就是檢測文字（字符串）內(nèi)部是否有符合http地址的內(nèi)容，顯然，這需要用到正則表達(dá)式進行驗證，這個工作前端和后臺都可以做，這里，只講前端的方法，使用JavaScript實現(xiàn)。

驗證HTTP地址的正則表達(dá)式如下（可能有疏漏或是不準(zhǔn)確之處，歡迎指正）：

var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;

前一部分匹配http或是https開頭的URL字符串地址，后面一部分匹配一些字符，英文字符、下劃線(_)、點號(.)、問號(?)以及等號(=)，連接短線(-)等。

替換
說到JavaScript中的替換功能，首先想到的自然是replace屬性了，replace屬性強大之處在于其支持正則表達(dá)式，可以對符合正則的字符串進行替換。例如，我們要替換掉字符串兩端的空格就可以使用類似下面的語句：

var s = " blank "; s = s.replace(/^\s+(.*?)\s+$/, ""); alert(s);

就會得到”blank”，兩端的空格被剔除了。同樣的，這里只要將匹配的http地址替換成<a>標(biāo)簽嵌套的含有href屬性的http地址就可以了。

現(xiàn)在有個問題是，如何高效的獲取匹配的字符串呢。在正則表達(dá)式中，有個叫做分組及反向引用的概念。例如有個RegExp構(gòu)造函數(shù)，在調(diào)用了test()方法后，所有的反向引用都被保存在這個RegExp構(gòu)造函數(shù)中，從RegExp.$1（它保存了第一個反向引用）開始，如果還有第二個反向引用，就是RegExp.$2，如果還有第三個，就是RegExp.$3，依次類推。

反向引用也可以用在String對象的replace方法中，也就是本文用到的字符串替換的方法中，所以我們就可以使用$1 $2來獲取正則表達(dá)式的分組內(nèi)容，實現(xiàn)高效的正則替換。參見如下代碼：

var v = "歡迎訪問我的個人網(wǎng)站：http://www.zhangxinxu.com/"; v = v.replace(reg, "<a href='$1$2'>$1$2</a>"); //這里的reg就是上面的正則表達(dá)式 alert(v);

結(jié)果會彈出類似下圖的結(jié)果：

組合與提煉
根據(jù)上面的一些分析，現(xiàn)在我們可以把替換http://字符串的方法提煉出來，寫成可繼承的形式，見如下代碼（方法名為httpHtml，適應(yīng)于所有字符串）：

String.prototype.httpHtml = function(){var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;return this.replace(reg, '<a href="$1$2">$1$2</a>'); };var v = "歡迎訪問我的個人網(wǎng)站：http://www.zhangxinxu.com/"; alert(v.httpHtml());

結(jié)果這段代碼顯示的結(jié)果與上圖幾乎一致（引號的差異）：

三、簡單的實例

我們可以模擬新浪微博含http://內(nèi)容的微博發(fā)布后的自動鏈接的實現(xiàn)。

您可以狠狠地點擊這里：http地址自動添加鏈接demo

操作如下圖所示：

您還可以修改文本域中的文字內(nèi)容進行相應(yīng)的測試。這里沒有使用上面的httpHtml()方法，原因之一就是要對文本域中的換行進行處理。

四、我是一只小小鳥

我呢，尤其在js這一塊，才疏學(xué)淺，資質(zhì)有限，需學(xué)甚多，表述上有不準(zhǔn)確之處在所難免。

如果您發(fā)現(xiàn)文章中有表述不準(zhǔn)確或是有相關(guān)問題需要交流可以通過評論或是去這里進行提問交流。
原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=749

（本篇完）

轉(zhuǎn)載于:https://www.cnblogs.com/daishuguang/p/3997057.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript实现http地址自动检测并添加URL链接的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。