網址自動轉連結的 JavaScript

此篇文章最近更新時間為2009-03-15 01:11:18 目前共有11篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

留言板或網誌常有 URL 要自動轉為 Link 的需求。(觀看範例
本來以為是個很簡單的小工,用 Regular Expression 就可以解決了。
沒想到一直解不掉一些特定的 Case,像是在標籤內的屬性、不正確的結尾等等...
斷斷續續搞了兩個禮拜都沒有辦法上線 Orz...

幸好同事 Chunghe 兄提供了 Greasemonkey 的 Linkify,它用 XPath 的方式來解。
我參考後改用 DOM 的方式來做、讓 Firefox 以外的瀏覽器都可以使用,歡迎各位試用並給予建議:
基本款:http://josephj.com/prototype/url-auto-link/url2link.js | 需 YUI 款:http://josephj.com/prototype/url-auto-link/url2link-yui.js

使用方法:
var dMsgs = YAHOO.util.Dom.getElementsByClassName('message');
// 參數 1 : 可以是 id、dom collection、或 dom node
// 參數 2 : (optional) 以 JSON 的方式提供了 allowTags, urlRegExp 等開放設定
updateURL2Link(document.body, {
    urlRegexp:/(https?:\/\/[^(\)\s)+\"\<\>]+)/ig
}); 


Comments

  1. sherry 2009-12-04 15:16:00
    哈囉!!Awoo><成功哩!可以跳出視窗了!
    真的很謝謝你花時間的幫忙!!><感恩!!!
  2. Awoo~ 2009-12-04 11:49:23
    喔!忘了提醒你!
    http://josephj.com/prototype/url-auto-link/url2link.js 有修改喔!
    所以內容要重新貼一次!
  3. Awoo~ 2009-12-04 11:48:24
    sherry,

    請把原來的:
    updateURL2Link()
    改為:
    updateURL2Link(document.body, {target:'_blank'});
    應該就可以了。
  4. sherry 2009-12-03 11:29:41
    哈囉!謝謝你~我弄出來了..!
    但是有個問題是..如果點選某個網址~然後視窗會直接覆蓋正在瀏覽的上面!
    有辦法讓它跳出新視窗嗎?
  5. Awoo~ 2009-11-30 10:15:12
    編輯你留言板的 HTML、在 </body> 結尾前...
    放個 <script></script> 的 Tag...
    複製 http://josephj.com/prototype/url-auto-link/url2link.js 的所有原始碼放到 <script/> 內
    且再多加一行 updateURL2Link(); 就可以囉
    不行的話再問我~
  6. sherry 2009-11-28 20:42:48
    你好..請問可以敎我怎麼使用嗎?
    我做了個公佈欄,如果公佈的資訊有網址的話..
    想要讓那網址變成連結!
    看了你分享的..但不會使用~"~可以麻煩你嗎謝謝
  7. william 2009-05-22 12:15:09
    Great! 這樣子就方便多了! XD
  8. josephj 2009-05-22 11:13:29
    Hi william,

    謝謝你提出問題,我已經在預設值排除 ) 這個符號了
    我想還是可能有特別的情況,所以允許大家帶入第二個 urlRegexp 參數囉(看上面)
  9. william 2009-05-22 07:25:57
    從我剛剛的留言可以看出,這個 blog server 並沒有正確地處理「我很想看這電影喔 (http://tw.movie.yahoo.com/),你有空陪陪我去看嗎?」這樣的例子呀。 XD
  10. william 2009-05-22 07:24:47
    像作者提供的範例:
    「我很想看這電影喔 (http://tw.movie.yahoo.com/),你有空陪陪我去看嗎?」

    正確的實作,就會根據 URL 的 formal syntax 去判定 ')' 不是屬於 URL 的一份子。
  11. clonn 2009-04-25 01:28:02
    目前想到大部分都是通用,text為http....
    就幫這段到結尾做一個link(<br/>前,或者是特定標籤,或者是文中有\n)

    可以問一下,哪些是特定CASE嗎?
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment