將網頁所有網址字串轉換為超連結

雖然「超連結」語法不難，但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼，那麼在留言、發表意見時，若需要引用網址，訪客是不會使用 A 標籤語法的，只會直接貼上 http 開頭的網址連結字串。

如此一來，留言中的網址連結無法點擊，不利於資訊傳播。因此我們可以看到 Facebook、Google+ 等社群媒體的設計，會自動將網址字串轉換為超連結，才能發揮社群的散播力。

同樣的，如果想讓自己網站(或留言區塊)的網址字串發揮傳播力，同時也是友善的使用者體驗，那麼安裝本文這個工具相信是必須的。以下先說明程式原理，想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)

一、Javascript 原理

1. 超乎想像的難度

原本認為這個任務只需要用正規表示式修改字串就完成了，沒想到真正處理起來，問題非常多：

• 使用正則式來修改字串，只能針對文字節點(text node)，不可連帶修改到 A 標籤原有內容
• 文字節點的字串內容，無法加入超連結 A 標籤的 HTML 語法 → 這些標籤語法將不會被執行，一樣被當成字串
• 不可修改到任何 HTML 標籤裡的屬性字串(例如 title 屬性若有 "google.com"字串就不可動到)
• 判別網址的正規表示式，由於例外太多，很難有周全的寫法
• 必須處理非 http 開頭的網址，例如 "google.com"也要能判別出是網址字串

2. 參考資料

這個討論串「How to replace plain URLs with links?」整理了多種解法，留言者最推薦的「Autolinker.js」，由於此 js 實在過於肥大，WFU 不太願意為了這個小小功能而多搞一個外掛，最終還是自己來，利用 jQuery 可以輕易解決處理 DOM 文字節點的繁雜工作。

不過該討論串推薦了一個判斷網址的「正規表示式」，之後的程式碼參考了這個連結來修改使用。這個 Regex 的優點是，有無 http 開頭的網址字串都能判斷出來，且考慮的狀況算是非常周全的一個。

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

以下安裝方式以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

• 綠色字串可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。
• 兩個紅色字串 ".comments"代表 Blogger 留言區塊區塊，會將留言之中的所有網址字串轉換為超連結。如果要擺到到別的位置，請將紅色字串改為 "." + class 名稱、或是 "#" + id 名稱。

三、網址轉換範例

下面是一個 DEMO 範例，請按下方的「轉換網址」按鈕，即可看到哪些字串會被轉換為超連結：