반응형
[목표]
URL 및 E-Mail 입력 시 자동으로 <a> 태그 링크를 생성합니다.
[방법]
아래와 같이 정규식을 활용하여 태그를 추가합니다.
function autoLink(id) {
var container = document.getElementById(id);
var doc = container.innerHTML;
var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi");
var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi");
container.innerHTML = doc.replace(regURL,"<a href='$1://$2' target='_blank'>$1://$2</a>").replace(regEmail,"<a href='mailto:$1'>$1</a>");
}
※ 여기서 정규식에 대한 내용은 다루지 않습니다.
좀 더 정교한 구현 함수가 있어 덧붙입니다.
(function() {
var autoLink,
slice = [].slice;
autoLink = function() {
var callback, k, linkAttributes, option, options, pattern, v;
options = 1 <= arguments.length ? slice.call(arguments, 0) : [];
pattern = /(^|[\s\n]|<[A-Za-z]*\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
if (!(options.length > 0)) {
return this.replace(pattern, "$1<a href='$2'>$2</a>");
}
option = options[0];
callback = option["callback"];
linkAttributes = ((function() {
var results;
results = [];
for (k in option) {
v = option[k];
if (k !== 'callback') {
results.push(" " + k + "='" + v + "'");
}
}
return results;
})()).join('');
return this.replace(pattern, function(match, space, url) {
var link;
link = (typeof callback === "function" ? callback(url) : void 0) || ("<a href='" + url + "'" + linkAttributes + ">" + url + "</a>");
return "" + space + link;
});
};
String.prototype['autoLink'] = autoLink;
}).call(this);
호출 예시
var doc = $('.class-name').find('li');
doc.html(doc.html().autoLink({ target: "_blank" }));
[출처] github.com/bryanwoods/autolink-js
bryanwoods/autolink-js
Tiny little tool to find URLs in a string of text and hyperlink them - bryanwoods/autolink-js
github.com
반응형
'프로그래밍 & IT 정보 > Javascript' 카테고리의 다른 글
자바스크립트 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기 (12) | 2020.12.01 |
---|---|
자바스크립트 Base64 이미지 코드 파일로 쓰기 (0) | 2020.09.24 |
자바스크립트 이미지 크기 조정 및 보정 로직 (0) | 2020.09.24 |
자바스크립트 텍스트 길이(바이트) 구하기 (0) | 2020.09.24 |
자바스크립트 아스키 코드 정렬 (0) | 2020.09.24 |
로컬스토리지에서 배열로 저장하는 방법 (0) | 2020.07.03 |
자바스크립트 JSON 오브젝트 복사 (0) | 2020.07.02 |
자바스크립트 타임스탬프 날짜 변환 (1) | 2020.07.02 |
댓글