[해피CGI][cgimall] 텍스트 URL을 링크로 변환 - linkify

linkify는 유효한 URL, 이메일, IP 주소, 심지어 텍스트의 단어까지 클릭 가능한 링크로 자동 변환하는 데 사용할 수 있는 JavaScript 라이브러리입니다.

node.js,  브라우저 , jQuery, Vanilla JavaScript, React.js, @mentions, #hashtag, ticket 등을 지원합니다.


글을 작성할때 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">

    https://www.google.com <br>

    https://www.naver.com <br>

    https://www.daum.net <br>

    https://www.nate.com <br>

    https://www.yahoo.com <br>

    https://www.bing.com <br>

    https://www.ask.com <br>

    https://www.duckduckgo.com <br>

    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

vali<a href="https://www.jqueryscript.net/time-clock/">date</a>: true,

// truncate link text

truncate: 0,

}

위의 기능 외에도 문자열이 링크인지 아닌지 테스트 하는 기능, ip 일 경우 프토로콜 붙여주는 기능 등 ... 여러가지 기능이 존재합니다. 
필요에 따라서 적절히 사용하면 좋을 것 같습니다.