[js]텍스트에서 링크 인식한 뒤 a태그넣기

hong·2021년 11월 9일
0

javascript

목록 보기
1/4

링크가 있으면 a태그 안에 넣어주도록 하는 js코드

<div id="contents">
	제 벨로그 주소는 https://velog.io/@hongihongi60 입니다.
</div>
	//url 자동 하이퍼링크 함수
	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 class='artist-portfolio' href='$1://$2' target='_blank'>$1://$2</a>").replace(regEmail,"<a class='go-to-link' href='mailto:$1'>$1</a>");
        }
        
        autolink(contents);

after

<div id="contents">
제 벨로그 주소는 <a class="go-to-link" href="https://velog.io/@hongihongi60" target="_blank">https://velog.io/@hongihongi60</a> 입니다.
</div>
profile
프론트엔드 개발을 하고 있습니다 ⌨️

0개의 댓글