Using jQuery, modify the href attribute of a hyperlink.

Problem

Using jQuery, how can you update the href attribute (link target) of a hyperlink?

Asked by Brian Boatright

Solution #1

Using

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

All hyperlinks’ hrefs will be changed to point to Google. However, you’ll probably want a picker that’s a little more refined. If you have a mix of link source (hyperlink) and link target (also known as “anchor”) anchor tags, for example:

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

…Then you probably don’t want to add href properties to them by accident. We can then specify that our selection will only match a> tags with an existing href element for added safety:

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

Of course, you’ll be thinking of something more interesting. You could do something like this to match an anchor with a certain existing href:

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

This will detect URLs with hrefs that are identical to http://www.google.com/. Matching, then updating only portion of the href: could be a more difficult task.

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

Only links having a href that begins with http://stackoverflow.com are selected in the first portion. Then, using a simple regular expression, a function is written to replace this part of the URL with a new one. This gives you a lot of versatility; you can change the link in any way you choose.

Answered by Shog9

Solution #2

If you’re using jQuery 1.6 or higher, you should use:

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

The distinction between prop and attr is that prop grabs the DOM property whereas attr obtains the HTML attribute.

More information may be found in this post:.prop() vs..attr ()

Answered by Jerome

Solution #3

On your lookup, use the attr method. Any attribute can be replaced with a new value.

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

Answered by Peter Shinners

Solution #4

Despite the fact that the OP specifically requested a jQuery response, you don’t have to use jQuery for everything these days.

In most circumstances, regex isn’t required.

Answered by Josh Crozier

Solution #5

You could do one of these depending on whether you want to convert all the identical links to something else, only the ones in a certain region of the page, or each one individually.

Change all Google links to go to Google Maps:

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

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

Add the container div’s class to the selector to modify links in a specific section. The Google link in the article will be changed, but not in the footer:

<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/');

Add an id to the link and then add that id to the selection to modify specific links regardless of where they are in the document. The second Google link in the content will be changed in this example, but neither the first or the one in the footer:

<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/');

Answered by flamingLogos

Post is based on https://stackoverflow.com/questions/179713/how-to-change-the-href-attribute-for-a-hyperlink-using-jquery