웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] 텍스트 URL을 링크로 변환 - linkify
해피CGI윤실장
2025. 9. 4. 09:18
linkify는 유효한 URL, 이메일, IP 주소, 심지어 텍스트의 단어까지 클릭 가능한 링크로 자동 변환하는 데 사용할 수 있는 JavaScript 라이브러리입니다.
node.js, 브라우저 , jQuery, Vanilla JavaScript, React.js, @mentions, #hashtag, ticket 등을 지원합니다.
글을 작성할때 URL 을 첨부하면 자동으로 링크가 생성되면 좋겠지만 그렇지 않는 경우가 대부분 입니다.
그래서 본문내에 링크가 있을 경우 URL 주소가 있을 경우 URL 에 자동으로 링크를 생성시키는 라이브러리 입니다.
만들려고 하면 만들겠지만 쉽게 사용할 수 있으니 사용하는 것도 괜찮은 것 같습니다.
# 사용방법
1. Linkify 라이브러리를 가져옵니다.
2. 텍스트 영억을 생성 합니다.
3. DOM 요소 내의 모든 URL 을 링크로 변환 합니다.
4. 사용 가능한 옵션
위의 기능 외에도 문자열이 링크인지 아닌지 테스트 하는 기능, ip 일 경우 프토로콜 붙여주는 기능 등 ... 여러가지 기능이 존재합니다.
필요에 따라서 적절히 사용하면 좋을 것 같습니다.
글을 작성할때 URL 을 첨부하면 자동으로 링크가 생성되면 좋겠지만 그렇지 않는 경우가 대부분 입니다.
그래서 본문내에 링크가 있을 경우 URL 주소가 있을 경우 URL 에 자동으로 링크를 생성시키는 라이브러리 입니다.
만들려고 하면 만들겠지만 쉽게 사용할 수 있으니 사용하는 것도 괜찮은 것 같습니다.
# 사용방법
1. Linkify 라이브러리를 가져옵니다.
<script src="linkify.js"></script>
<script src="linkify-html.min.js"></script>
<script src="linkify-element.js"></script>
2. 텍스트 영억을 생성 합니다.
<div id="linkifyjs">
admin@example.com <br>
</div>
3. DOM 요소 내의 모든 URL 을 링크로 변환 합니다.
<script>
//linkifyElement(document.getElementById("id"), options, document);
linkifyElement(document.getElementById("linkifyjs"), {target: "_blank"});
</script>
4. 사용 가능한 옵션
{
// additional attributes for the links
attributes: null,
// default CSS class
className: 'linkified',
// default protocol
defaultProtocol: 'http',
/* event listeners
click: function (e) {
alert('Link clicked!');
}
*/
events: null,
// format the text
format: function (value, type) {
return value;
},
// format the href
formatHref: function (href, type) {
return href;
},
// ignore specified HTML tags
ignoreTags: [],
// if true, \n line breaks will automatically be converted to <br> tags.
nl2br: false,
// rel attribute
rel: null,
// Accepts a function that takes the unformatted href, the link type (e.g., 'url', 'email', etc.) and returns the rel string.
// Accepts an object where each key is the link type and each value is the rel string to use for that type.
render: null,
// the tag that should be used to wrap each URL. This is useful for cases where a tags might be innapropriate, or might syntax problems
tagName: 'a',
// target attribute for each linkified tag.
target: {
url: '_blank'
},
// custom validation rules here
// truncate link text
truncate: 0,
}
위의 기능 외에도 문자열이 링크인지 아닌지 테스트 하는 기능, ip 일 경우 프토로콜 붙여주는 기능 등 ... 여러가지 기능이 존재합니다.
필요에 따라서 적절히 사용하면 좋을 것 같습니다.
