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

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

May 16, 2016 pm 05:03 PM
url 文字 連結

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;    };
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1248
24
如何使用磁力鏈接 如何使用磁力鏈接 Feb 18, 2024 am 10:02 AM

磁力連結是一種用於下載資源的連結方式,相較於傳統的下載方式更為便利和有效率。使用磁力連結可以透過點對點的方式下載資源,而不需要依賴中介伺服器。本文將介紹磁力連結的使用方法及注意事項。一、什麼是磁力連結磁力連結是一種基於P2P(Peer-to-Peer)協定的下載方式。透過磁力鏈接,使用者可以直接連接到資源的發布者,從而完成資源的共享和下載。與傳統的下載方式相比,磁

115://開頭的連結怎麼下載?下載方法介紹 115://開頭的連結怎麼下載?下載方法介紹 Mar 14, 2024 am 11:58 AM

  最近有很多用戶都在問小編,115://開頭的連結怎麼下載?想要下載115://開頭的連結需要藉助115瀏覽器,大家下載好115瀏覽器後,再來看看下面小編整理好的下載教學。  115://開頭的鏈接下載方法介紹  1、登入115.com,下載115瀏覽器並安裝。  2、在1​​15瀏覽器網址列輸入:chrome://extensions/,進入擴充中心,搜尋Tampermonkey,安裝對應插件。  3、在115瀏覽器網址列輸入:  油猴腳本:https://greasyfork.org/en/

如何取得微信影片號連結?微信影片號碼怎麼加入商品連結? 如何取得微信影片號連結?微信影片號碼怎麼加入商品連結? Mar 22, 2024 pm 09:36 PM

微信視訊號作為微信生態系統的一部分,已逐漸成為內容創作者和商家的重要推廣工具。在這個平台上獲取視頻號連結對於分享和傳播內容至關重要。下文將詳細介紹如何獲取微信視頻號鏈接,以及如何在視頻號中添加商品鏈接,提升內容的傳播效果。一、如何取得微信影片號連結?在微信視頻號中發布影片後,系統會自動建立一個影片連結。作者可以在發布後複製該鏈接,方便進行分享和傳播。登入微信影片號碼後,您可以瀏覽自己的影片號碼首頁。在主頁上,每個視頻都附有相應的鏈接,方便您直接複製或分享。 3.搜尋影片號碼:在微信搜尋框中輸入影片號名

為什麼NameResolutionError(self.host, self, e) from e,怎麼解決 為什麼NameResolutionError(self.host, self, e) from e,怎麼解決 Mar 01, 2024 pm 01:20 PM

報錯的原因NameResolutionError(self.host,self,e)frome是由urllib3函式庫中的例外類型,這個錯誤的原因是DNS解析失敗,也就是說,試圖解析的主機名稱或IP位址無法找到。這可能是由於輸入的URL位址不正確,或DNS伺服器暫時無法使用所導致的。如何解決解決此錯誤的方法可能有以下幾種:檢查輸入的URL地址是否正確,確保它是可訪問的確保DNS伺服器可用,您可以嘗試在命令行中使用"ping"命令來測試DNS伺服器是否可用嘗試使用IP位址而不是主機名稱來存取網站如果是在代理

PHP函數介紹—get_headers(): 取得URL的回應頭訊息 PHP函數介紹—get_headers(): 取得URL的回應頭訊息 Jul 25, 2023 am 09:05 AM

PHP函數介紹—get_headers():取得URL的回應頭資訊概述:在PHP開發中,我們經常需要取得網頁或遠端資源的回應頭資訊。 PHP函數get_headers()能夠方便地取得目標URL的回應頭訊息,並以陣列形式傳回。本文將介紹get_headers()函數的用法,以及提供一些相關的程式碼範例。 get_headers()函數的用法:get_header

如何在最新的iOS 17系統中連接iPhone上的Apple Notes 如何在最新的iOS 17系統中連接iPhone上的Apple Notes Sep 22, 2023 pm 05:01 PM

使用新增連結功能在iPhone上連結AppleNotes。筆記:如果您已安裝iOS17,則只能在iPhone上的AppleNotes之間建立連結。在iPhone上開啟「備忘錄」應用程式。現在,打開要在其中添加連結的註釋。您也可以選擇建立新備忘錄。點擊螢幕上的任何位置。這將向您顯示一個選單。點擊右側的箭頭以查看“新增連結”選項。點擊它。現在,您可以鍵入註解的名稱或網頁URL。然後,點擊右上角的完成,新增的連結將出現在筆記中。如果要添加指向某個單字的鏈接,只需雙擊該單字即可將其選中,選擇“添加鏈接”並按

html和url的差別是什麼 html和url的差別是什麼 Mar 06, 2024 pm 03:06 PM

區別:1、定義不同,url是是統一資源定位符,而html是超文本標記語言;2、一個html中可以有很多個url,而一個url中只能存在一個html頁面;3、html指的是網頁,而url指的是網站位址。

如何禁止 Outlook 在 Edge 瀏覽器中開啟鏈接 如何禁止 Outlook 在 Edge 瀏覽器中開啟鏈接 Aug 03, 2023 am 11:49 AM

如何阻止Outlook在Edge中開啟連結在繼續之前,請確保您的首選瀏覽器在Windows中設定為預設瀏覽器。這可確保在所需的瀏覽器中開啟Outlook連結。要檢查並設定預設瀏覽器:對於Windows10:按一下“開始”選單,然後選擇“設定”前往“應用程式”,然後前往“預設應用程式”在預設應用程式清單的底部尋找“網頁瀏覽器”如果列出了您的首選瀏覽器,則一切就緒。如果列出了MicrosoftEdge,請按一下它,然後從清單中選擇您喜歡的瀏覽器。如果出現提示,請按一下「仍切換」。修復Edge問題中Ou

See all articles