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

雖然「超連結」語法不難，但終究多數的訪客並不熟悉程式語言、不瞭解 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 範例，請按下方的「轉換網址」按鈕，即可看到哪些字串會被轉換為超連結：

1. 字串黏在一起也能判斷出來，例如：

• testhttp://google.com
• 請前往google.com

2. 原本的超連結「WFU BLOG」不受影響

3. 諮詢頁面請參考 http://www.wfublog.com/2013/06/service-suggest-cooperation.html，在 Blogger 上架站，如不想用官方範本，建議的方式為尋找接近客製形式、現成的免費或付費模板，然後進行修改，推薦幾個品質很棒的範本網站：

• btemplates.com
• ivythemes.blogspot.com
• www.templateism.com
• www.soratemplates.com

4. 聯絡資訊：

• Google+:https://plus.google.com/+WayneFu
• FB:https://www.facebook.com/wayne.fu.blogger

更多 jQuery 相關工具：