안녕하세요 촌놈입니다 ^^ 오늘은 게시물에서 링크부분만 자동으로 A 태그를 삽입해 주는 라이브러리 소개 하고자합니다!
최근에 고객으로 부터 요즘 게시판에는 게시물내에 링크가 있으면 자동으로 링크 기능이 동작하는데 이를 넣어 달라고 했습니다. 덧글에서 말이지요 ^^.. 아쉽게도 덧글에서 웹에디터(위지윅)은 없었기에 긴급하게 찾았습니다.
물론 정규식으로 처리 하여도 되지만 이제 그것도 귀찮아서 API를 찾게되는 군요 !!
자 그럼 단계별로 적용법을 알아 볼까요? ~~~ 고고싱!
라이브러리 추가!
- jQuery 라이브러리 추가
- autolink-js 링크를 통한 소스 다운로드 및 링크 추가 / 압축을 해제하시면 autolink.js 과 압축 버전 autolink.min.js 가 있습니다
※ CDN 은 없군요 아직! 그렇게 큰 라이브러리도 아니고 하니 그런가 봅니다.
<head> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script> <script src='라이브러리경로/autolink.js'></script> </head>
최소 권장 jQuery 버전은 1.6.2 인것 같습니다!
동작 코드
autolink-js 페이지를 이동 하셔서 릴리즈 내용을 다운로드 하시면 내부에 Example 가 존재 합니다만 기본 동작은 아래와 같습니다.
$.each($('li'), function(idx, tg) {
$(this).html($(this).html().autoLink({ target: "_blank" })); });
li 태그를 모두 찾아서 돌면서 내부의 html 태그에 포함된 내용중 링크든 모두 _blink 타임으로 변경 이라고 이해 하시면됩니다 ^^
적용을 하시면 위와 같이 기존에는 Text 형태만 나오던 부분이 링크 형식으로 대체 됩니다!
※ 아쉽게도 하이라이트(검색 등을 할경우 색상 표시 하는 것)와 동시에 사용은 안되는 군요! 하이라이트 API 한번 찾아 봐야 겠습니다.
PS. 여기까지 읽어 주셔서 감사합니다(하트!, 이웃추가!)
'촌놈 - 취미로하는개발 > 웹' 카테고리의 다른 글
| PHP mail 함수를 이용해서 메일 보내기 - 첨부파일 포함 (1) | 2018.11.23 |
|---|---|
| [Java-JDK] 스프링 Scheduling 적용 하기 - Spring 5 (0) | 2018.11.23 |
| [Tomcat] 톰캣 자원 모니터링 - JMX (0) | 2018.11.16 |
| JSP Oracle JDBC 데이터베이스 연결 예제 (3) | 2018.11.02 |
| [Javascript] 자바스크립트 숫자만 허용 하는 다양한 방법 (0) | 2018.10.22 |
촌놈 개발자 일기
개발자로서 살아가는 느낌과 정보를 공유 합니다