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

2018. 6. 12. 07:25 | 댓글 7

티스토리 댓글 내의 URL 링크 활성화

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

티스토리 #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(); 부분의 클래스명은 적절히 수정하시기 바랍니다. 저는 관리자 댓글 내의 링크만 활성화되도록 만들었습니다. 테스트해보면 잘 작동합니다.

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

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

    댓글 내의 링크 테스트입니다.

    https://www.thewordcracker.com/miscellaneous/%EA%B5%AC%EA%B8%80-%ED%81%AC%EB%A1%AC-7%EC%9B%94%EB%B6%80%ED%84%B0-%EB%AA%A8%EB%93%A0-http-%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90-%EB%8C%80%ED%95%B4-%EA%B2%BD%EA%B3%A0-%ED%91%9C%EC%8B%9C/

  2. thumbnail
    veneto

    와 역시 아는만큼 좋은기능을 쓸수있네요 ㅎㅎ

  3. thumbnail
    공수래공수거

    아 어렵네요 ㅎㅎ
    알면 참 편리한데 말입니다

  4. thumbnail
    lIllIIlIlIIl

    선생님 글 잘보고갑니다. 즐겨찾기하고 자주 정보 얻으러 와야겠습니다. 좋은하루되세요