文章中の URL やメールアドレスに自動的にリンクを設定する方法

実行例

「URL っぽい文字をみつける」「メールアドレスっぽい文字列をみつける」というように、文字列の中からあるパターンを探し出すには正規表現 (Regular Expression) を利用します。そのこと自体は問題ないと思いますが、問題はどんなパターンにするか、ということです。私の場合、下記のようなパターンで (今のところ) うまく行っています。

$(document).ready(function() {
  $('#btn').on('click', function(evt) {
    var s = $('#edit1').html();

    $('#result').html(getLink(s));
  });

  function getLink(s) {
    if (!s) {
      return '';
    }

    var re_url = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
    var re_mail = /((?:\w+\.?)*\w+@(?:\w+\.)+\w+)/gi;

    s = s.replace(re_url, '<a href="$1" target="_blank">$1</a>');
    s = s.replace(re_mail, '<a href="mailto:$1">$1</a>');

    return s;
  }
});