首頁 > web前端 > js教程 > javascript自動為文字url位址增加連結的方法分享_javascript技巧

javascript自動為文字url位址增加連結的方法分享_javascript技巧

WBOY
發布: 2016-05-16 17:03:16
原創
1291 人瀏覽過

URL位址自動加入的實作其實就是那麼點內容:偵測與替換。

檢測

「偵測」就是偵測文字(字串)內部是否有符合http位址的內容,顯然,這需要用到正規表示式進行驗證,這個工作前端和後台都可以做,這裡,只講前端的方法,使用JavaScript實作。

驗證HTTP位址的正規表示式如下(可能有疏漏或是不準確之處,歡迎指正):

複製程式碼 程式碼如下:

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

前一部分符合http或是https開頭的URL字串位址,後面一部分符合一些字符,英文字符、底線(_)、點號(.)、問號(?)以及等號(=),連接短線(-)等。

替換www.jb51.net
說到JavaScript中的替換功能,首先想到的自然是replace屬性了,replace屬性強大之處在於其支援正規表示式,可以對符合正則的字串進行替換。例如,我們要替換掉字串兩端的空格就可以使用類似下面的語句:

複製程式碼 程式碼如下:

var s = " blank ";


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

就會得到”blank”,兩端的空格被剔除了。同樣的,這裡只要將符合的http位址替換成標籤嵌套的含有href屬性的http位址就可以了


程式碼如下:
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) {

      if (!url.match('^https?: //')) {
               >        });

        return text;    };
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板