Cómo cambiar el href de un hipervínculo usando jQuery

Utilizando

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

modificará el href de todos los hipervínculos para que apunten a Google. Sin embargo, es probable que quiera un selector algo más refinado. Por ejemplo, si tiene una mezcla de etiquetas de anclaje de origen de enlace (hipervínculo) y de destino de enlace (también conocido como "ancla"):

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

...Entonces probablemente no quieras añadir accidentalmente atributos href a ellas. Por seguridad, podemos especificar que nuestro selector sólo coincidirá con las etiquetas <a> con un atributo href existente:

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

Por supuesto, es probable que tengas algo más interesante en mente. Si quieres que un ancla coincida con un href específico existente, podrías usar algo como esto:

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

Esto encontrará los enlaces en los que la "referencia" coincida exactamente con la cadena "http://www.google.com/". Una tarea más complicada podría ser la de hacer coincidir y luego actualizar sólo una parte de la "referencia":

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

La primera parte selecciona sólo los enlaces cuyo href comienza con https://stackoverflow.com. A continuación, se define una función que utiliza una simple expresión regular para sustituir esta parte de la URL por una nueva. Tenga en cuenta la flexibilidad que esto le da - cualquier tipo de modificación del enlace podría hacerse aquí.

Utilice el método attr en su búsqueda. Puedes cambiar cualquier atributo por un nuevo valor.

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

Dependiendo de si quieres cambiar todos los enlaces idénticos a otra cosa o si quieres controlar sólo los de una sección determinada de la página o cada uno individualmente, podrías hacer una de estas cosas.

Cambiar todos los enlaces a Google para que apunten a Google Maps:

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

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

Para cambiar los enlaces de una sección determinada, añada la clase del div contenedor al selector. Este ejemplo cambiará el enlace de Google en el contenido, pero no en el pie de página:

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

Para cambiar enlaces individuales, independientemente de su ubicación en el documento, añada un identificador al enlace y luego añada ese identificador al selector. Este ejemplo cambiará el segundo enlace de Google en el contenido, pero no el primero ni el del pie de página:

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