티스토리 댓글에 URL 자동 링크 적용하는 방법

티스토리는 댓글에 URL을 입력하면 자동 링크를 생성해 주지 않아서

직접 그 기능을 구현해 보았습니다.

 

북 클럽 스킨 기준입니다.

다른 스킨에 적용하고 싶으신 분은 댓글 남겨 주시면 확인해 드릴게요.

 

깃허브에 올라 온 자동링크 만들어 주는 소스를 참고하여 작성하였습니다.

github.com/bryanwoods/autolink-js

bryanwoods/autolink-js

 

소스가 길지 않아서 직접 복사하여 가져 온 다음 필요한 로직을 덧붙여 구현해 보겠습니다.

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

 

html 편집을 클릭 합니다.

 

그럼 다음과 같은 HTML 에디터가 뜨는데,

여기에 실제 동작에 필요한 소스 코드를 작성을 해 보겠습니다.

 

body 태그 안쪽 제일 하단 script 태그에 다음과 같이 작성을 합니다.

/* 댓글 자동 링크 */
function commentAutoLink() {
    (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 commentList = $('div.comment-list>ul>li>p');
    var replyList = $('div.comment-list>ul>li>ul>li>p');
    for(var i=0; i < commentList.length; i++) {
        commentList[i].innerHTML = commentList[i].innerHTML.autoLink({ target: "_blank" });
    }
    for(var j=0; j < replyList.length; j++) {
        replyList[j].innerHTML = replyList[j].innerHTML.autoLink({ target: "_blank" });
    }
}

$(document).ready(function() {
    commentAutoLink();
});

화면이 다 로딩이 되면 jQuery를 이용하여 댓글이 입력된 부분의 태그를 찾아

하이퍼 링크를 입혀 주는 기능을 먹였습니다.

 

참고하세요 :)