[jQuery] 텍스트에 하이퍼링크(hyperlink) 적용하기

jQuery를 사용하여 텍스트에 하이퍼링크(hyperlink)를 적용하는 예시입니다.

jQuery를 사용하여 텍스트에 하이퍼링크(hyperlink) 적용하기

jQuery로 텍스트에 하이퍼링크(hyperlink)를 적용하려면 wrap() 메소드를 사용합니다. 가령 다음과 같은 스크립트의 경우:

$("button").click(function(){
$("p").wrap("<div></div>");
});
// Source: w3schools

각 <p> 요소 부분을 <div> 요소로 둘러싸게 됩니다.

이것을 응용하여 특정 요소 내 텍스트에 링크를 적용할 수 있습니다. 예를 들어 다음과 같은 같은 HTML 코드가 있는 경우:

<ul>
<li class="menu1">메뉴 1</li>
<li class="menu2">메뉴 2</li>
</ul>

다음 jQuery 스크립트를 적용해보면:

$('.menu1').contents().wrap('<a href="#" class="menu1_link"></a>');

데모:

첫 번째 <li> 내에 하이퍼링크가 추가되어 있음을 알 수 있습니다. 위의 방법 대신 wrapInner() 메소드를 사용해도 동일한 결과를 얻을 수 있습니다. (wrapInner()에 대한 자세한 내용은 여기를 참고하세요.)

$('.menu1').wrapInner('<a href="#" class="menu1_link"></a>');
// 참고

데모:

이와 같이 wrap() 메소드를 사용하여 쉽게 원하는 태그를 둘러쌀 수 있습니다.

조금 더 복잡한 예를 하나 생각해볼까요? 한 요소의 링크를 다른 요소로 복사하는 방법을 살펴보겠습니다. 예를 들어 다음과 같은 HTML 코드에서:

<div class="alpha">
<a href="http://www.abc.com">텍스트1</a>
</div>

<div class="beta">
텍스트 2
</div>

텍스트1에 적용된 하이퍼링크를 복사하여 beta 요소 내의 텍스트에 적용하려면;

// 링크를 복제하고 텍스트를 삭제함
$link = $('.alpha').find('a').clone().text('');
// 모든 .beta의 컨텐츠에 복제한 링크로 둘러싸도록 합니다.
$('.beta').contents().wrap($link);

데모:

그러면 본래는 아무런 링크가 없던 텍스트2에 텍스트1에 적용되어 있던 하이퍼링크를 복사합니다.

또 다른 방법으로 조금 더 복잡하게 만들면:

var href = $('.alpha').find('a').attr('href'); // a 태그의 href 가져오기
var text = $('.beta').text(); //beta 요소 내의 텍스트 가져오기
var betaHTML = "<a href='" + href + "'>" + text + "</a>"; // 하이퍼링크 생성
$('.beta').html(betaHTML); // beta 요소 업데이트
// 참고

데모:

stackoverflow의 이 글도 참고해보시기 바랍니다. attr() 메소드에 대한 자세한 내용은 여기에서 참고할 수 있습니다.

참고로 PHP 코드 등 각종 코드 스크립트를 판매하는 CodeCanyon에서 저렴한 비용에 자바스크립트/jQuery 템플릿 등을 구입할 수 있습니다.

참고:

• jQuery를 사용하여 텍스트를 변경하는 방법