티스토리에 자동 링크 적용하기

http://ssamkj.tistory.com/16

위 링크의 내용대로 자동 링크를 사용하다가 어느날부터 제대로 작동을 하지 않아 찾아보다가 다음과 같이 해결

$ 대신 jQuery로 교체해주니까 작동됨.

autolink.js의 원본

var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&amp;=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&amp;=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&amp;=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;</span>

  

    function makeHTML(textNode) {

        var source = textNode.data;

        return source.replace(re, function() {

            var url = arguments[0];

            var a = $('').attr({'href': url, 'target': '_blank'}).text(url);

            return url.match(/^https?:\/\/$/) ? url : $('</p><div></div>').append(a).html();

        });

    };

  

    function eachText(node, callback) {

        $.each(node.childNodes, function() {

            if (this.nodeType != 8 &amp;&amp; this.nodeName != 'A') {

                this.nodeType != 1 ? callback(this) : eachText(this, callback);

            }

        });

    };

     

    function autolink(obj){

        return obj.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]);

                });

            });

    };

수정

var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&amp;=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&amp;=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&amp;=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;

 

    function makeHTML(textNode) {

        var source = textNode.data;

        return source.replace(re, function() {

            var url = arguments[0];

            var a = jQuery('').attr({'href': url, 'target': '_blank'}).text(url);

            return url.match(/^https?:\/\/$/) ? url : jQuery('</p><div></div>').append(a).html();

        });

    };

 

    function eachText(node, callback) {

        jQuery.each(node.childNodes, function() {

            if (this.nodeType != 8 &amp;&amp; this.nodeName != 'A') {

                this.nodeType != 1 ? callback(this) : eachText(this, callback);

            }

        });

    };

    

function autolink(obj){

return obj.each(function() {

           var queue = [];

           eachText(this, function(e) {

               var html = makeHTML(e);

               if (html != e.data) {

                   queue.push([e, makeHTML(e)]);

               }

           });

           jQuery.each(queue, function(i, x) {

               jQuery(x[0]).replaceWith(x[1]);

           });

       });

};

하단의 코드도 다음과 같이 변경

이전

<SCRIPT type=text/javascript>     

autolink($("#content"));

</SCRIPT>

수정

<SCRIPT type=text/javascript>

jQuery(document).ready(function(){  // 문서가 모두 읽힌 후에 다음을 실행

autolink(jQuery("#content"));

});

</SCRIPT>