一、天生我材必有用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結果會彈出類似下圖的結果：

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

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());

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

三、簡單的實例

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

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

操作如下圖所示：

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

四、我是一只小小鳥

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

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

（本篇完）

轉載于:https://www.cnblogs.com/daishuguang/p/3997057.html

總結

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

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