티스토리 댓글 내의 URL 주소에 링크를 거는 방법

티스토리 댓글 내의 URL 주소가 포함되어도 클릭할 수 없도록 되어 있습니다. 티스토리 댓글 내에 http://... 또는 https://... 주소를 감지하여 클릭 가능하도록 바꿀 수 있습니다.

티스토리 댓글 내의 URL 주소에 링크를 거는 방법 (관리자 댓글 내의 URL만 활성화)

티스토리 #1 스킨에서 댓글에 포함된 링크가 클릭되도록 수정하기에서 소개한 매우 간단한 코드를 만들어보았습니다. 작동은 잘 되었지만 문제를 너무 단순하게 생각했는지 스크립트에 오류가 있습니다.

대신 Autolink, jQuery plugin to detect URLs in text and make them into clickable links 글에서 소개하는 코드를 사용하면 티스토리 댓글 내의 URL 주소를 클릭 가능하도록 만들어서 사용자들이 클릭하면 새 창(새 탭)에서 열리도록 할 수 있습니다.

저는 다음과 같은 코드를 만들어서 티스토리 HTML 파일의 </body> 태그 바로 앞에 추가했습니다.

<script>
jQuery(function($) {
    var re = /((http|https|ftp):\/\/[a-zа-я0-9\w?=&.\/-;#~%-]+(?![a-zа-я0-9\w\s?&.\/;#~%"=-]*>))/g;
    function makeHTML(textNode) {
        var source = textNode.data;
        return source.replace(re, function() {
            var url = arguments[0];
            var a = $('<a></a>').attr({'onclick' : 'window.open(\'' + url + '\'); return false;','href': '#', 'target': '_blank'}).text(url);
            return url.match(/^https?:\/\/$/) ? url : $('<div></div>').append(a).html();
        });
    };
    function eachText(node, callback) {
        $.each(node.childNodes, function() {
            if (this.nodeType != 8 && this.nodeName != 'A') {
                this.nodeType != 1 ? callback(this) : eachText(this, callback);
            }
        });
    };
    $.fn.autolink = function() {
        return this.each(function() {
            var queue = [];
            eachText(this, function(e) {
                var html = makeHTML(e);
                if (html != e.data) {
                    queue.push([e, makeHTML(e)]);
                }
            });
            $.each(queue, function(i, x) {
                $(x[0]).replaceWith(x[1]);
            });
        });
    };
});
</script>

 <script>
            jQuery(function ($) {
                $('.rp_admin .txt_reply').autolink();
            });
        </script>

 

위의 코드에서 맨 아래의 $('.rp_admin .txt_reply').autolink(); 부분의 클래스명은 적절히 수정하시기 바랍니다. 저는 관리자 댓글 내의 링크만 활성화되도록 만들었습니다. 테스트해보면 잘 작동합니다.

위의 코드는 비단 티스토리 댓글에서뿐만 아니라 다양한 환경에서 응용할 수 있습니다.

참고:

https://avada.tistory.com/1784

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법