javaScript識別網址文本並轉為鏈接文本

最近項目有個需求：用戶之間發送消息時，如果發送者輸入的信息中含有網址文本，要在接受者界面中顯示網址鏈接，點擊該鏈接直接跳轉到網頁。
這個功能和 QQ 發送網址文本的效果非常像，可以說是一模一樣的。

 

思路：首先，要判斷文本中是否含有網址文本，其次，將網址文本轉換為可點擊的鏈接文本，即將網址文本通過a標簽括起來。

 

判斷網址：

在 javaScript 中判斷某種特殊格式的文本，首選正則表達式，下面是我用來檢查網址的正則：

var re = /^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/g;

這里需要注意的是，正則必須使用全局匹配 g 。否則只能匹配到文本中的第一個網址文本。

 

網址轉換為鏈接文本：

在網址轉換中涉及字符串的操作，那么自然要使用 String 對象的方法，先復習下 String 對象能與正則表達式一起使用的方法有哪些？
常用的有這幾個：

search：檢索與正則表達式相匹配的值。
match：找到一個或多個正則表達式的匹配。
replace：替換與正則表達式匹配的子串。
split：把字符串分割為字符串數組。

可以看出來，其中 replace 是最方便、最適合這個需求的。

 

replace函數的使用方法：

語法：

string.replace(searchvalue,newvalue)

參數解析：

searchvalue：必須。規定子字符串或要替換的模式的 RegExp 對象。請注意，如果該值是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp 對象。

newvalue：必需。一個字符串值。規定了替換文本或生成替換文本的函數。

注意：第二個參數支持使用函數來制定文本替換的規則。

 

回顧需求，要將網址轉換為a鏈接,那么得到的轉換規則如下：

url => <a href='url' target='_blank'>url</a>

 

根據上面的分析過程，使用代碼來描述如下：

var urlToLink = function(str){
    var re = /^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/g; 

    str = str.replace(re, function(website){ 
        return "<a href='" + website +"' target='_blank'>" + website + "</a>"; 
    }); 
    return str;
};

 

到這里，javaScript識別網址文本並轉為鏈接文本的函數接完成了。