[jQuery] 텍스트를 유지한 상태에서 하이퍼링크 지우기

CSS를 사용하여 하이퍼링크를 비활성화하는 방법은 여기에서 확인해볼 수 있습니다. 이글에서는 jQuery를 사용하여 <a href...>...</a> 태그를 제거하여 하이퍼링크를 비활성화하는 방법을 살펴보겠습니다.

예를 들어, 다음과 같은 HTML 코드가 있다고 생각해봅시다.

<a href="http://www.google.com/" title="Link to Google">Google</a>

우선은 다음과 같이 간단하게 unwrap() 메소드를 사용할 수 있습니다(unwrap()에 대한 자세한 내용은 여기를 참고하세요).

$('a[title="Link to Google"]').contents().unwrap();

또 다른 방법으로 replaceWith() 메소드를 사용해볼 수 있습니다(참고).

$("a[title='Link to Google']").each(function(){
$(this).replaceWith($(this).text());
});

아래의 방법도 생각해볼 수 있습니다.

$("a[title='Link to Google']").replaceWith(function() {
return $(this).contents();
});
// Reference: stackoverflow

하이퍼링크를 변경하려면 (예를 들어 특정 요소의 링크를 www.google.com으로 변경하려는 경우) 간단하게 attr() 메소드를 사용하면 됩니다.

$("a").attr("href", "http://www.google.com/")

참고로 attr 대신 prop을 사용하면 속도가 더 빨라진다고 합니다(참고).

$("a").prop("href", "http://www.google.com")

.prop()과 .attr()의 차이점에 대해 궁금하면 이 글을 참고해보시기 바랍니다.