http://ssamkj.tistory.com/16
위 링크의 내용대로 자동 링크를 사용하다가 어느날부터 제대로 작동을 하지 않아 찾아보다가 다음과 같이 해결
$ 대신 jQuery로 교체해주니까 작동됨.
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;</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 && 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;?:@&=+$,]|%[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 = 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 && 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>
'etc' 카테고리의 다른 글
티스토리에 syntaxhighlighter 3.0.83 적용하기 + jQuery + autoloader (3) | 2012.06.05 |
---|