자바스크립트 URL 및 E-Mail 링크 자동 생성

[목표]

URL 및 E-Mail 입력 시 자동으로 <a> 태그 링크를 생성합니다.

 

 

[방법]

아래와 같이 정규식을 활용하여 태그를 추가합니다.

function autoLink(id) {
  var container = document.getElementById(id);
  var doc = container.innerHTML;
  var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi");
  var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi");
  container.innerHTML = doc.replace(regURL,"<a href='$1://$2' target='_blank'>$1://$2</a>").replace(regEmail,"<a href='mailto:$1'>$1</a>");
}

※ 여기서 정규식에 대한 내용은 다루지 않습니다.

 

좀 더 정교한 구현 함수가 있어 덧붙입니다.

(function() {
    var autoLink,
            slice = [].slice;

    autoLink = function() {
        var callback, k, linkAttributes, option, options, pattern, v;
        options = 1 <= arguments.length ? slice.call(arguments, 0) : [];
        pattern = /(^|[\s\n]|<[A-Za-z]*\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
        if (!(options.length > 0)) {
            return this.replace(pattern, "$1<a href='$2'>$2</a>");
        }
        option = options[0];
        callback = option["callback"];
        linkAttributes = ((function() {
            var results;
            results = [];
            for (k in option) {
                v = option[k];
                if (k !== 'callback') {
                    results.push(" " + k + "='" + v + "'");
                }
            }
            return results;
        })()).join('');
        return this.replace(pattern, function(match, space, url) {
            var link;
            link = (typeof callback === "function" ? callback(url) : void 0) || ("<a href='" + url + "'" + linkAttributes + ">" + url + "</a>");
            return "" + space + link;
        });
    };

    String.prototype['autoLink'] = autoLink;

}).call(this);

 

호출 예시

var doc = $('.class-name').find('li');
doc.html(doc.html().autoLink({ target: "_blank" }));

 

[출처] github.com/bryanwoods/autolink-js

bryanwoods/autolink-js