[Tip] 티스토리 자동링크(autolink)로 만들기

티스토리 기본 에디터로는 링크를 입력 하였을때 <a>가 아닌 <p>태그로 입력이 된다. (현재 내 스킨 기준)

꼭 이렇게 URL 설정을 해주어야 하는 불편함이 있다.

하지만 autolink.js를 활용하면 쉽게 바꿀 수 있다!

---

1. 첨부 된 파일을 다운 받는다. autolink.js

/* autolink.js */ var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&=+$,]|%[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$,;:@&=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img; function makeHTML(textNode) { var source = textNode.data; return source.replace(re, function() { var url = arguments[0]; var a = $('<a></a>').attr({'href': url, '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); } }); }; 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]); }); }); };

2. 관리 > 스킨 편집 > 파일업로드 > autolink.js를 추가 한다.

3. 관리 > 스킨 편집 > HTML > Script를 추가한다. (2019.03.30. updated)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script type="text/javascript" src="./images/autolink.js"></script>

<script>

autolink($('.article_view, .area_reply')); // 스킨마다 콘텐츠 영역 클래스가 다를 수 있으니 확인을 해야 한다.

</script>

※ 콘텐츠 영역 클래스는 요소 검사(Inspect Element) 또는 개발자도구(F12) > Elements 로 확인할 수 있다.

---