Tutoriales JavaScript

Modificar un enlace con Javascript

Los enlaces son esos amigos que no pueden faltar en una página web, pero ¿y si hubiese un enlace que quisiéramos modificar?.

Ya sea que haya un enlace que no puedas modificar porque no tengas acceso al código de la página o cualquier otra razón, modificar un enlace puede resultar útil en más de una forma.

Gracias a Javascript, es posible sin recargar la página utilizando href e innerText, y no se requiere ser un maestro del desarrollo web para poder lograrlo, sólo basta un poco de lógica y seguir correctamente este tutorial.

1. Identificar el enlace

Primero, se requiere de algo con que identificar el enlace, darle a entender al script que enlace queremos modificar.
Ejemplo #1: su ID
<a id="test" href="http://google.com"></a>En el primer ejemplo nos encontramos con un enlace cuyo ID es test y su url es http://google.com para editarlo bastaría con utilizar su ID para identificarlo de la siguiente manera:
var enlace = document.getElementById("test");
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";

Ejemplo #2: su Class
<a class="test" href="http://google.com"></a>En el segundo nos encontramos con un enlace que no tiene un ID, pero en su lugar tiene un Class con el que podemos identificarlo de la siguiente manera:
var enlace = document.querySelector('.test');
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";

Ejemplo #3: ¿qué hacer si no tiene ni ID ni Class?
<a title="test" href="http://google.com"></a>Este ultimo es más complicado pero no imposible, si no hay ni ID ni Class se puede usar algún otro atributo, por ejemplo en titulo (title) e inclusive el enlace mismo. De la siguiente manera:
var enlace = document.querySelector('a[title="test"]');
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";
O por el enlace
var enlace = document.querySelector('a[href*="http://google.com"]');
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";

Demo


Enlace de prueba

Código de la demo

<!-- Creamos un formulario -->
<form name="linkform" method="post">
<input type="text" id="contentform" placeholder="Contenido de el enlace..."></input>
<input type="text" id="urlform" value="http://"></input><br>
<input onclick="modify()" type="button" value="Aceptar" />
</form>

<!-- Y un enlace a modificar -->
<a id="link" target="_blank" href="#">Enlace de prueba</a>
<script>
//creamos la función "modify"
function modify() {
//Ingresamos el ID del enlace, en este caso es "Link"
var linkto = document.getElementById("link");
//Ingresamos el enlace, en este caso el que pongan en el formulario
linkto.href = document.linkform.urlform.value;
//Ingresamos un texto, en este caso el que pongan en el formulario
linkto.innerText = document.linkform.contentform.value;
}
</script>

  1. Jose Martinez

    Que tal!! tengo esta situación, espero me pueden colaborar.
    Estoy trabajando en WordPress y la plantilla que estoy utilizando genera este enlace permanente el cual no he podido modificar:
    http://teatrocolon.diptongo.net/project/danza/
    y necesito que cambie para que apunte a este nuevo enlace:
    http://teatrocolon.diptongo.net/programacion/danza/

    El href no tiene ID ni Class y no es posible asignarlos.
    Seguí el tutorial y no me funciona.

    El script hay que ejecutarlo dentro del HTML o se puede crear un JS aparte y llamarlo en el HEAD?

    De antemano agradezco mucho su colaboración 🙂

    1. Adrián PrunedaAdrián Pruneda

      Si usas WordPress y se trata de una plantilla lo mejor será eliminar el enlace desde el administrador (ftp) para así ahorrarte problemas; usar JavaScript no es la mejor solución, al menos en tu caso.

      En caso de que de igual manera desees usar JS, sería algo así:
      var enlace = document.querySelector('a[href*="teatrocolon.diptongo.net"]');
      enlace.href = "http://NuevaURL";
      enlace.innerText = "Nuevo Texto";

      Puedes ponerlo tanto en el cuerpo de la página como en la cabecera, si lo decides poner en la cabecera, recuerda usar onload, para que se ejecute al final y no te de problemas:
      window.onload = function() {
      var enlace = document.querySelector('a[href*="teatrocolon.diptongo.net"]');
      enlace.href = "http://NuevaURL";
      enlace.innerText = "Nuevo Texto";
      }

  2. Hector

    mmm si quiere extraer el enlace pero no se cual es exactamente… solo se el dominio, pero gran parte se genera de forma dinámica, se es posible obtener aun el enlace?

    1. Adrián PrunedaAdrián Pruneda

      Sería algo como:
      var enlace = document.querySelector('a[href*="DOMINIO AQUÍ"]');
      //obtenemos el enlace
      alert(enlace.href);

      Ahí ingresarías alguna parte del enlace que puedas usar para identificarle, puedes poner incluso sólo una parte del dominio, como “google”.