javascript自動(dòng)給文本url地址增加鏈接的方法分享
URL地址自動(dòng)添加的實(shí)現(xiàn)其實(shí)就是那么點(diǎn)內(nèi)容：檢測(cè)與替換。
檢測(cè)
“檢測(cè)”就是檢測(cè)文字（字符串）內(nèi)部是否有符合http地址的內(nèi)容，顯然，這需要用到正則表達(dá)式進(jìn)行驗(yàn)證，這個(gè)工作前端和后臺(tái)都可以做，這里，只講前端的方法，使用JavaScript實(shí)現(xiàn)。
驗(yàn)證HTTP地址的正則表達(dá)式如下（可能有疏漏或是不準(zhǔn)確之處，歡迎指正）：
var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;
前一部分匹配http或是https開(kāi)頭的URL字符串地址，后面一部分匹配一些字符，英文字符、下劃線(_)、點(diǎn)號(hào)(.)、問(wèn)號(hào)(?)以及等號(hào)(=)，連接短線(-)等。
替換 m.fzitv.net
說(shuō)到JavaScript中的替換功能，首先想到的自然是replace屬性了，replace屬性強(qiáng)大之處在于其支持正則表達(dá)式，可以對(duì)符合正則的字符串進(jìn)行替換。例如，我們要替換掉字符串兩端的空格就可以使用類(lèi)似下面的語(yǔ)句：
var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);
就會(huì)得到”blank”，兩端的空格被剔除了。同樣的，這里只要將匹配的http地址替換成<a>標(biāo)簽嵌套的含有href屬性的http地址就可以了
例,這個(gè)表達(dá)式可以匹配 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地址匹配計(jì)較完善的。利用這個(gè)表達(dá)式我寫(xiě)了兩個(gè)小函數(shù)，將用戶留言的URL地址替換成可點(diǎn)擊的鏈接，沒(méi)有什么太難的，就是利用JavaScript 的 replace() 函數(shù)來(lái)實(shí)現(xiàn)替換 URL 為 link：
/**
* JavaScrit 版本
* 將URL地址轉(zhuǎn)化為完整的A標(biāo)簽鏈接代碼
*/
var replaceURLToLink = function (text) {
text = text.replace(URL, function (url) {
var urlText = url;
if (!url.match('^https?://')) {
url = 'http://' + url;
}
return '' + urlText + '';
});
return text;
};
- php獲取YouTube視頻信息的方法
- javascript 對(duì)象數(shù)組根據(jù)對(duì)象object key的值排序
- 刪除Javascript Object中間的key
- JavaScript 鍵盤(pán)event.keyCode值列表大全
- javascript 同時(shí)在IE和FireFox獲取KeyCode的代碼
- JavaScript獲取網(wǎng)頁(yè)中第一個(gè)鏈接ID的方法
- javascript使用switch case實(shí)現(xiàn)動(dòng)態(tài)改變超級(jí)鏈接文字及地址
- JavaScript判斷一個(gè)URL鏈接是否有效的實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)從連接中獲取youtube的key實(shí)例
相關(guān)文章
微信小程序canvas開(kāi)發(fā)水果老虎機(jī)的思路詳解
這篇文章主要介紹了微信小程序canvas開(kāi)發(fā)水果老虎機(jī)的思路，本文通過(guò)思路代碼分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了js加入收藏夾代碼并兼容ie/ff/op,需要的朋友可以參考下2014-05-05
實(shí)例分析JS與Node.js中的事件循環(huán)
本篇文章通過(guò)實(shí)例給大家詳細(xì)分析了JS與Node.js中的事件的原理以及用法，大家學(xué)習(xí)一下吧。2017-12-12
這篇文章主要給大家介紹了關(guān)于js防抖和節(jié)流的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了完美的js圖片輪換效果，包括左右移動(dòng)和緩動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯?wèn)題及解決方法，本文給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
iframe窗口高度自適應(yīng)的又一個(gè)巧妙實(shí)現(xiàn)思路
這篇文章主要介紹了實(shí)現(xiàn)iframe窗口高度自適應(yīng)的又一個(gè)巧妙思路,需要的朋友可以參考下2014-04-04
JavaScript已經(jīng)成為現(xiàn)代Web開(kāi)發(fā)的中流砥柱,實(shí)時(shí)調(diào)試、快速原型設(shè)計(jì)以及代碼的即時(shí)反饋通常需要開(kāi)發(fā)者使用多個(gè)工具和手段,現(xiàn)代工具的涌現(xiàn)為我們帶來(lái)了更好的解決方案,而RunJs就是其中之一,本文將帶您深入探討RunJs的特性、用途,需要的朋友可以參考下2023-08-08
JS+CSS實(shí)現(xiàn)仿雅虎另類(lèi)滑動(dòng)門(mén)切換效果