본문으로 바로가기
  1. Home
  2. IT & 기타/티스토리
  3. 티스토리 댓글 내의 URL 주소에 링크를 거는 방법

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

· 댓글 7

티스토리 댓글 내의 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

 

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

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거

avada.tistory.com

 

💬 댓글 7
logo

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

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/

logo

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

logo

워드프레스에서는 댓글 내의 링크가 활성화되지만 티스토리에는 그런 기능이 없어서 관련 코드를 찾아 응용해보았습니다.

(구글을 검색하면 다른 스크립트를 사용하여 구현한 글도 검색이 됩니다만 조금 복잡하여 이 글의 방법을 사용하고 있습니다.)

logo

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

logo

직접 코드를 만들려면 어렵지만, 다른 사람이 만들어놓은 것을 이용하는 것은 조금만 노력하면 가능하리라 생각됩니다.ㅎㅎ

logo

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

logo

감사합니다~ 즐거운 휴일 보내시기 바랍니다:)

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

초기화 시켜야 하는 경우 참⋯

💬空空(공공)

신뢰가 되지않는다면 세무사⋯

💬똘켓ioi

가성비가 좋은 호스팅이로군요^^

💬空空(공공)

잘 보고 갑니다 무더운 하루⋯

💬空空(공공)

올해는 국세청에서 쉽게 신고⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드