Question

How can you change the href attribute (link target) for a hyperlink using jQuery?

Answer 1

Using

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

will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. ‘anchor’) anchor tags:

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

…Then you probably don’t want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match <a> tags with an existing href attribute:

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

Of course, you’ll probably have something more interesting in mind. If you want to match an anchor with a specific existing href, you might use something like this:

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

This will find links where the href exactly matches the string http://www.google.com/. A more involved task might be matching, then updating only part of the href:

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

The first part selects only links where the href starts with http://stackoverflow.com. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you – any sort of modification to the link could be done here.