jQuery를 사용하여 하이퍼링크의 href를 변경하는 방법

https://stackoverflow.com/questions/179713

05-07-2019
|

문제

jQuery를 사용하여 하이퍼링크의 href를 어떻게 변경할 수 있나요?

해결책

사용

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

Google을 가리키도록 모든 하이퍼링크의 href를 수정합니다.하지만 아마도 좀 더 세련된 선택기를 원할 것입니다.예를 들어 링크 소스(하이퍼링크)와 링크 대상(즉,"앵커") 앵커 태그:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...그러면 실수로 추가하고 싶지 않을 것입니다. href 그들에게 속성을 부여합니다.안전을 위해 선택기가 일치하는 항목만 지정하도록 지정할 수 있습니다. <a> 기존 태그가 있는 태그 href 기인하다:

$("a[href]") //...

물론, 당신은 아마도 더 흥미로운 것을 염두에 두고 있을 것입니다.특정 기존 앵커와 일치시키려는 경우 href, 다음과 같은 것을 사용할 수 있습니다:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

그러면 다음 링크가 검색됩니다. href 문자열과 정확히 일치합니다. http://www.google.com/.더 관련성이 높은 작업이 일치할 수 있으며 그 다음에는 일부만 업데이트됩니다. href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

첫 번째 부분에서는 href가 있는 링크만 선택합니다. 시작하다 ~와 함께 http://stackoverflow.com.그런 다음 간단한 정규식을 사용하여 URL의 이 부분을 새 부분으로 바꾸는 함수가 정의됩니다.이것이 제공하는 유연성에 주목하십시오. 링크에 대한 모든 종류의 수정이 여기에서 수행될 수 있습니다.

다른 팁

jQuery 1.6 이상에서는 다음을 사용해야합니다.

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

차이 prop 그리고 attr 그게 다 attr HTML 속성을 잡고 있습니다 prop DOM 속성을 잡습니다.

이 게시물에서 자세한 내용은 다음과 같습니다. .prop () vs .attr ()

사용 attr 조회 방법. 새 값으로 속성을 전환 할 수 있습니다.

$("a.mylink").attr("href", "http://cupcream.com");

모든 동일한 링크를 다른 것으로 변경할 것인지 아니면 페이지의 주어진 섹션 또는 각각의 링크를 개별적으로 제어 하려는지 여부에 따라이 중 하나를 수행 할 수 있습니다.

Google지도를 가리킬 Google에 대한 모든 링크를 변경합니다.

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

주어진 섹션에서 링크를 변경하려면 컨테이너 DIV 클래스를 선택기에 추가하십시오. 이 예제는 컨텐츠의 Google 링크를 변경하지만 바닥 글에는 없습니다.

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

문서의 위치에 관계없이 개별 링크를 변경하려면 링크에 ID를 추가 한 다음 해당 ID를 선택기에 추가하십시오. 이 예제는 컨텐츠의 두 번째 Google 링크를 변경하지만 바닥 글의 첫 번째 링크는 아닙니다.

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');

_{OP가 명시 적으로 jQuery 답변을 요청했지만 요즘 모든 것에 jQuery를 사용할 필요는 없습니다.}

jQuery가없는 몇 가지 방법 :

당신이 바꾸고 싶다면 href 가치 모두 <a> 요소, 모두를 선택한 다음 반복합니다. 노드리스트: (예시)

var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

당신이 바꾸고 싶다면 href 모두의 가치 <a> 실제로있는 요소 href 속성, 추가하여 선택하십시오 [href] 속성 선택기 (a[href]): (예시)

var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

당신이 바꾸고 싶다면 href 가치 <a> 그 요소 포함하다 예를 들어 특정 값 google.com, 속성 선택기를 사용하십시오 a[href*="google.com"]: (예시)
```
var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
마찬가지로, 다른 사람도 사용할 수도 있습니다 속성 선택기. 예를 들어:
- a[href$=".png"] 선택하는 데 사용될 수 있습니다 <a> 요소 href 가치는 다음과 같습니다 .png.
- a[href^="https://"] 선택하는 데 사용될 수 있습니다 <a> 요소 href 값입니다 접두사 ~와 함께 https://.

당신이 바꾸고 싶다면 href 가치 <a> 여러 조건을 충족하는 요소 : (예시)

var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

.. regex가 필요하지 않습니다 대부분 케이스.

이 스 니펫은 클래스 'menu_link'링크가 클릭되면 호출되며 링크의 텍스트와 URL이 표시됩니다. 반환 허위는 링크가 따르는 것을 방지합니다.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

그것을 위해 jQuery를 사용하지 마십시오! JavaScript만으로는 매우 간단합니다.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

간단한 방법은 다음과 같습니다.

Attr 함수 (jQuery 버전 1.0부터)

$("a").attr("href", "https://stackoverflow.com/")

또는

소품 기능 (jQuery 버전 1.6부터)

$("a").prop("href", "https://stackoverflow.com/")

또한 위 방식의 장점은 선택기가 단일 앵커를 선택하면 해당 앵커만 업데이트하고 선택기가 앵커 그룹을 반환하면 하나의 문을 통해서만 특정 그룹을 업데이트한다는 것입니다.

이제 정확한 앵커 또는 앵커 그룹을 식별하는 방법은 여러 가지가 있습니다.

아주 간단한 것들:

태그 이름을 통해 앵커 선택: $("a")
인덱스를 통해 앵커 선택: $("a:eq(0)")
특정 클래스에 대한 앵커를 선택하십시오 (이 클래스에서와 같이 클래스가있는 앵커 전용 앵커 active) : $("a.active")
특정 ID를 가진 앵커 선택(여기서는 예입니다) profileLinkID) : $("a#proileLink")
첫 번째 앵커 href 선택: $("a:first")

더 유용한 것:

href 속성이 있는 모든 요소 선택: $("[href]")
특정 href가 있는 모든 앵커 선택: $("a[href='www.stackoverflow.com']")
특정 href가 없는 모든 앵커 선택: $("a[href!='www.stackoverflow.com']")
특정 URL이 포함된 href가 있는 모든 앵커 선택: $("a[href*='www.stackoverflow.com']")
특정 URL로 시작하는 href가 있는 모든 앵커 선택: $("a[href^='www.stackoverflow.com']")
특정 URL로 끝나는 href가 있는 모든 앵커 선택: $("a[href$='www.stackoverflow.com']")

이제 특정 URL을 수정하려면 다음과 같이 하면 됩니다.

예를 들어 google.com으로 이동하는 모든 URL에 대해 프록시 웹사이트를 추가하려는 경우 다음과 같이 구현할 수 있습니다.

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });

 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Wordpress Avada 테마 로고 이미지의 HREF 변경

ShortCode Exec PHP 플러그인을 설치하면 myjavascript라는 단축 코드를 생성할 수 있습니다.

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

이제 모양/위젯으로 이동하여 바닥글 위젯 영역 중 하나를 선택하고 텍스트 위젯을 사용하여 다음 단축 코드를 추가할 수 있습니다.

[myjavascript]

선택기는 사용하는 이미지와 Retina 준비 여부에 따라 변경될 수 있지만 개발자 도구를 사용하면 언제든지 알아낼 수 있습니다.

href 속성에서는 순수한 JavaScript를 사용하여 변경할 수 있지만 이미 페이지에 jQuery가 주입 된 경우 걱정하지 마십시오. 두 가지 방법을 모두 보여 드리겠습니다.

당신이 이것을 가지고 있다고 상상해보십시오 href 아래에:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

그리고 당신은 그것을 링크로 바꾸는 것을 좋아합니다 ...

사용 순수한 자바 스크립트 도서관이 없으면 할 수 있습니다.

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

그러나 또한 jQuery 넌 할 수있어:

$("#ali").attr("href", "https://stackoverflow.com");

또는

$("#ali").prop("href", "https://stackoverflow.com");

이 경우, 당신이 이미 jQuery가 주입 된 경우, 아마도 jQuery One은 더 짧고 더 많은 크로스 브라우저처럼 보일 것입니다 ... 그러나 그 외에는 내가 JS 하나...

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow