autolink-js
autolink-js is a small (about half a kilobyte), simple, and tested JavaScript tool that takes a string of text, finds URLs within it, and hyperlinks them.
Why bother releasing such a tiny little method?
I recently needed to find and hyperlink URLs in user-submitted text and was surprised to find that doing what seemed like such a simple task wasn't already a Solved Problem. Different regex solutions led to different unwanted side effects, and other utilities were far, far more complex and feature rich than I needed.
Basic Usage
autolink-js adds an autoLink() method to JavaScript's String prototype, so you can use it on any JavaScript string. Take a look at the tests, but essentially, after including either autolink.js or autolink-min.js to your page, it works like this:
// Input "This is a link to Google http://google.com".autoLink() // Output "This is a link to Google http://google.com'>http://google.com"
Additional Options
You can pass any additional HTML attributes to the anchor tag with a JavaScript object, like this:
// Input "This is a link to Google http://google.com".autoLink({ target: "_blank", rel: "nofollow", id: "1" }) // Output "This is a link to Google http://google.com' target='_blank' rel='nofollow' id='1'>http://google.com"
Callback
Callback option can be used to redefine how links will be rendered.
// Input "This is a link to image http://example.com/logo.png".autoLink({ callback: function(url) { return /\.(gif|png|jpe?g)$/i.test(url) ? '<img src="' + url + '">' : null; } }); // Output "This is a link to image
http://example.com/logo.png'>"
Example
Open example/example.html in your web browser and view the source for a simple but full-featured example of using with jQuery.
Running the tests
After cloning this repository, simply open test/suite.html in your web browser. The tests will run automatically.
출처 - https://github.com/bryanwoods/autolink-js
보통 많은 종류의 게시판에서 url형태나 email 형태에 자동 링크를 걸어주는 정규식을 사용하고 있습니다.. 좀전에 친구가 jsp로 게시판을 만드는 과정에서 자동링크를 할 수 있는 방법을 물어오길래 클라이언트에서 할 수 있는 방법을 생각해봤습니다. 자바는 1.4부터 RegExp 패키지를 사용할 수 있거든요...
생각해보니.. 서버측 부하는 적게 걸리면서 같은 효과를 낼 수 있을꺼 같아 팁으로 올립니다.
<html>
<body>
<script>
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>");
}
</script>
<div id="test">
폼체크 스크립트 lib.validate.js의 사용법은 http://maniacamp.com/examples/validate_howto.html 을 참조하세요
거친마루의 이메일은 comfuture@studyfriend.net 입니다.<br>
php스쿨의 주소는 http://www.phpschool.com 입니다
</div>
<script>autolink('test');</script>
</body>
</html>
게시판등에 적용할때는 내용을 출력할 td에 id를 부여해주고 autolink('id'); 형태로 사용하면 되겠지요 : )
미리보기는 링크#1을 참조하세요
function autoLink(content) {
var regURL = new RegExp('(^|[^"])(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)', 'gi');
var regURL2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
//var regEmail = new RegExp('([^:])([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+\.[a-z0-9-]+)', 'gi');
return content.replace(regURL, '$1<a class="autoLink" href="$2://$3" target="_blank">$2://$3</a>')
.replace(regURL2, '$1<a class="autoLink" href="http://$2" target="_blank">$2</a>');
//.replace(regEmail, '$1<a class="autoLink" href="mailto:$2">$2</a>');
}
출처: https://linuxism.ustd.ip.or.kr/1553?category=420916 [linuxism]
'자바스크립트' 카테고리의 다른 글
| [javascript] 브라우져별 unload 이벤트 할당 (0) | 2020.08.27 |
|---|---|
| array deep copy (0) | 2020.06.22 |
| IE 10 에서 form 객체 접근 (0) | 2014.01.14 |
| trim 구현 (0) | 2013.09.25 |
| 구글 맵 API (0) | 2013.07.17 |
