URL地址自動添加的實現其實就是那麼點內容:檢測與替換。
檢測
“檢測”就是檢測文字(字符串)內部是否有符合http地址的內容,顯然,這需要用到正則表達式進行驗證,這個工作前端和後台都可以做,這裡,只講前端的方法,使用JavaScript實現。
驗證HTTP地址的正則表達式如下(可能有疏漏或是不准確之處,歡迎指正):
複製代碼代碼如下:
var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;
前一部分匹配http或是https開頭的URL字符串地址,後面一部分匹配一些字符,英文字符、下劃線(_)、點號(.)、問號(?)以及等號(=),連接短線(-)等。
替換www.VeVB.COm
說到JavaScript中的替換功能,首先想到的自然是replace屬性了,replace屬性強大之處在於其支持正則表達式,可以對符合正則的字符串進行替換。例如,我們要替換掉字符串兩端的空格就可以使用類似下面的語句:
複製代碼代碼如下:
var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);
就會得到”blank”,兩端的空格被剔除了。同樣的,這裡只要將匹配的http地址替換成<a>標籤嵌套的含有href屬性的http地址就可以了
例,這個表達式可以匹配http,https,ftp,ftps以及IP地址的URL地址。
複製代碼代碼如下:
var URL = /(https?://|ftps?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(: [0-9]+)?|([w]+.)(S+)(w{2,4})(:[0-9]+)?)(/?([w#!:.?+ =&%@!-/]+))?/ig;
還算是URL地址匹配計較完善的。利用這個表達式我寫了兩個小函數,將用戶留言的URL地址替換成可點擊的鏈接,沒有什麼太難的,就是利用JavaScript 的replace() 函數來實現替換URL 為link:
複製代碼代碼如下:
/**
* JavaScrit 版本
* 將URL地址轉化為完整的A標籤鏈接代碼
*/
var replaceURLToLink = function (text) {
text = text.replace(URL, function (url) {
var urlText = url;
if (!url.match('^https?://')) {
url = 'http://' + url;
}
return '' + urlText + '';
});
return text;
};