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

¿Cómo se puede cambiar el href de un hipervínculo usando jQuery?

preguntado Oct 07 '08, 16:10

Para aquellos de ustedes interesados ​​en soluciones sin el uso de jQuery - stackoverflow.com/questions/179713/… -

Para las versiones más recientes de jQuery: stackoverflow.com/a/6348239/4928642 -

el ejemplo más simple sin jQuery stackoverflow.com/a/39276418/696535 -

Una lista completa de posibles soluciones, algunos selectores útiles y una forma de obtener el valor de las coincidencias de expresiones regulares y usarlos para actualizar href: stackoverflow.com/a/49568546/1262248 -

12 Respuestas

Usar

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

modificará el href de todos los hipervínculos para que apunten a Google. Sin embargo, probablemente quieras un selector algo más refinado. Por ejemplo, si tiene una combinación de etiquetas de anclaje de fuente de enlace (hipervínculo) y 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 agregar accidentalmente href atributos a ellos. Entonces, por seguridad, podemos especificar que nuestro selector solo coincidirá <a> etiquetas con una existente href atributo:

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

Por supuesto, probablemente tengas algo más interesante en mente. Si desea hacer coincidir un ancla con un existente específico href, puede usar algo como esto:

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

Esto encontrará enlaces donde el href coincide exactamente con la cadena http://www.google.com/. Una tarea más complicada podría ser la coincidencia y luego actualizar solo una parte de la href:

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

La primera parte selecciona solo los enlaces donde el href comienza con http://stackoverflow.com. Luego, se define una función que usa una expresión regular simple para reemplazar esta parte de la URL por una nueva. Tenga en cuenta la flexibilidad que esto le brinda: aquí se puede realizar cualquier tipo de modificación en el enlace.

Respondido 08 ago 18, 01:08

"en HTML, los nombres de los elementos no distinguen entre mayúsculas y minúsculas, pero en XML sí distinguen entre mayúsculas y minúsculas". - w3.org/TR/CSS21/selector.html - falta de párpados

Para completar, dado que esto todavía está vinculado ocasionalmente, agregaré que desde jQuery 1.4, el último ejemplo no requiere usar each - ahora sería posible lo siguiente: $(selector).attr('href', function() { return this.replace(/.../, '...'); }); - david hedlund

@DavidHedlund Ligera corrección: te perdiste href: ...return this.href.replace(/.../, '...'); }); - Armstrongest

Con jQuery 1.6 y superior debe usar:

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

La diferencia entre los prop y attr es que attr toma el atributo HTML mientras que prop toma la propiedad DOM.

Puedes encontrar más detalles en esta publicación: .prop () frente a .attr ()

Respondido el 22 de junio de 18 a las 01:06

Una explicación de por qué debería usar prop encima attr Se agradecería que las personas que acudan a la pregunta y encuentren attr aparentemente funciona perfectamente bien en las versiones más nuevas de jQuery ... - tambalearse

@womble usando prop es más rápido que attr porque actualiza el dom en lugar de modificar el HTML. jsfiddle.net/je4G5 - fideos

@Popnoodles Hay más problemas que eso, pero sería demasiado extenso explicarlos todos aquí. Así que los lectores deberían echar un vistazo a la publicación vinculada a womble. Sin embargo, un resumen aquí estaría bien, de lo contrario, esta información se pierde un poco .. - Rauni Lillemets

Use el attr método en su búsqueda. Puede cambiar cualquier atributo con un nuevo valor.

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

Respondido 07 Oct 08, 19:10

Esto funcionó para mí si configuro class = "mylink" en la etiqueta a. Solo quería aclarar que en caso de que alguien intente configurar name = "mylink" similar a la respuesta anterior y esperando que funcione. - cpugurú

Dependiendo de si desea cambiar todos los enlaces idénticos a otra cosa o si desea controlar solo los de una sección determinada de la página o cada uno individualmente, puede hacer uno de estos.

Cambie 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 en una sección determinada, agregue la clase div del 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 dónde se encuentren en el documento, agregue una identificación al enlace y luego agregue esa identificación 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/');

Respondido 18 Oct 08, 16:10

Aunque el OP solicitó explícitamente una respuesta de jQuery, no es necesario usar jQuery para todo en estos días.

Algunos métodos sin jQuery:

  • Si desea cambiar el href valor de todos <a> elementos, selecciónelos todos y luego itere a través del lista de nodos: (ejemplo)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Si desea cambiar el href valor de todo <a> elementos que realmente tienen un href atributo, selecciónelos agregando el [href] selector de atributosa[href]): (ejemplo)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Si desea cambiar el href valor de <a> elementos que que no contengo un valor específico, por ejemplo google.com, usa el selector de atributos a[href*="google.com"]: (ejemplo)

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

    Del mismo modo, también puede utilizar el otro selectores de atributos. Por ejemplo:

    • a[href$=".png"] podría usarse para seleccionar <a> elementos cuyos href el valor termina con .png.

    • a[href^="https://"] podría usarse para seleccionar <a> elementos con href valores que son prefijado con https://.

  • Si desea cambiar el href valor de <a> elementos que satisfacen múltiples condiciones: (ejemplo)

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

..no hay necesidad de expresiones regulares, en la mayor casos.

Respondido el 19 de enero de 15 a las 00:01

La forma sencilla de hacerlo es:

Función Attr (desde jQuery versión 1.0)

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

or

Función de apoyo (desde jQuery versión 1.6)

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

Además, la ventaja de la forma anterior es que si el selector selecciona un solo ancla, actualizará ese ancla solo y si el selector devuelve un grupo de ancla, actualizará el grupo específico a través de una sola declaración.

Ahora, hay muchas formas de identificar el ancla o grupo de anclajes exactos:

Bastante simples:

  1. Seleccione el ancla mediante el nombre de la etiqueta: $("a")
  2. Seleccione el ancla a través del índice: $("a:eq(0)")
  3. Seleccione ancla para clases específicas (ya que en esta clase solo ancla con clase active): $("a.active")
  4. Seleccionar anclajes con ID específico (aquí en ejemplo profileLink IDENTIFICACIÓN) : $("a#proileLink")
  5. Seleccionando el primer ancla href: $("a:first")

Más útiles:

  1. Seleccionando todos los elementos con atributo href: $("[href]")
  2. Seleccionar todos los anclajes con href específico: $("a[href='www.stackoverflow.com']")
  3. Seleccionando todos los anclajes que no tienen un href específico: $("a[href!='www.stackoverflow.com']")
  4. Seleccionando todos los anclajes con href que contienen una URL específica: $("a[href*='www.stackoverflow.com']")
  5. Seleccionando todos los anclajes con href comenzando con una URL específica: $("a[href^='www.stackoverflow.com']")
  6. Seleccionando todos los anclajes con href que terminan con una URL específica: $("a[href$='www.stackoverflow.com']")

Ahora, si desea modificar URL específicas, puede hacerlo como:

Por ejemplo, si desea agregar un sitio web proxy para todas las URL que van a google.com, puede implementarlo de la siguiente manera:

$("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);
    });
   });

respondido 30 mar '18, 05:03

Este fragmento se invoca cuando se hace clic en un enlace de la clase 'menu_link' y muestra el texto y la URL del enlace. El retorno falso evita que se siga el enlace.

<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;
});

contestado el 10 de mayo de 11 a las 10:05

No soy demasiado pedante sobre el voto negativo, pero si no va a decir por qué está votando negativamente, no se está logrando nada y no debería molestarse. - Crafter

Votado en contra porque su fragmento y su respuesta no responden a la pregunta original, y realmente no proporcionan ninguna explicación de por qué la información obtenida con el fragmento es útil. - david millar

Votar en contra de esto es pedante. Es posible que él / ella no haya puesto tanto esfuerzo en su respuesta como lo hicieron otros usuarios, pero de hecho proporcionó un código para resolver el problema. El OP solo necesitaría pensar un poco más además de copiar y pegar una solución personalizada. - Ulises

¡Deje de usar jQuery solo por el simple hecho de hacerlo! Esto es tan simple solo con JavaScript.

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

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

Respondido el 03 de Septiembre de 16 a las 21:09

No hay suficiente jQuery. - Malckier

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

Respondido 13 Jul 15, 12:07

href en un atributo, para que pueda cambiarlo usando JavaScript puro, pero si ya tiene jQuery inyectado en su página, no se preocupe, lo mostraré en ambos sentidos:

Imagina que tienes esto href abajo:

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

Y te gusta cambiarlo el enlace ...

Usar JavaScript puro sin ninguna biblioteca puedes hacer:

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

Pero tambien en jQuery tu puedes hacer:

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

or

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

En este caso, si ya tiene jQuery inyectado, probablemente jQuery one se vea más corto y más entre navegadores ... pero aparte de eso, voy con el JS uno...

Respondido el 19 de enero de 19 a las 04:01

Cambiar el HREF de la imagen del logotipo del tema Wordpress Avada

Si instala el complemento PHP ShortCode Exec, puede crear este código corto que llamé myjavascript

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

Ahora puede ir a Apariencia / Widgets y elegir una de las áreas de widget de pie de página y usar un widget de texto para agregar el siguiente código corto

[myjavascript]

El selector puede cambiar dependiendo de la imagen que esté usando y si está lista para retina, pero siempre puede averiguarlo usando las herramientas de los desarrolladores.

respondido 24 mar '17, 18:03

Trata

link.href = 'https://...'

link.href = 'https://stackoverflow.com'
<a id="link" href="#">Click me</a>

Respondido el 21 de junio de 20 a las 20:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.