URLをHTMLのリンクに置換して表示する方法

URLをAngularJSの「filter」を使って画面表示時にリンク<a>に置換する方法です。

JavaScript

angular.module('myApp', ['ngSanitize'])
.filter("replaceHtmlUrl", function(){
    var urlPattern = /(http|ftp|https)(:\/\/[\w-.!~*¥'();¥/?:¥@&=+¥$,%#]+)/gi;
    return function (str, exp) {
        angular.forEach(str.match(urlPattern), function (url) {
            str = str.replace(url, "<a href='" + url + "' target='_blank'>" + url + "</a>");
        });
        return str;
    };
});

HTML

<div ng-bind-html="message | replaceHtmlUrl"></div>

ポイントは「ngSanitize」モジュールを利用していることと、変換後の文字列を「ng-bind-html」でバインドしている点です。

正規表現については「正規表現 - JavaScript | MDN」を参照。