¿Cómo hacer que la url de los links en un texto con javascript vaya cambiando aleatoriamente cada vez que se refresca la página?

Question

Estoy intentando hacer que determinadas palabras de un texto se conviertan en links con javascript (si coinciden con ciertas expresiones regulares). Me gustaría que cada link tuviera diferentes posibles urls que cambien aleatoriamente cada vez que se refresque la página.

El código con el que estoy trabajando es el siguiente:

<html>

<head>
    
    
      
       

</head>

<body>

<p>La casa tiene 200 m2 y está situada en Tenerife. Tiene cuatro ventanas y dos puertas.</p>

<script>

function linkar(texto, link){
        html = document.documentElement.innerHTML;
        re = new RegExp(texto, 'g');
        if(re.test(html)){
            html  = html.replace(re, '<a href="' + link + '" rel="nofollow noopener" target="_blank">' + texto + '</a>');
        }
        document.documentElement.innerHTML = html;
        }
        
        
vinculos = {

'casa':['https://www.casa.com', 'https://www.casa.es', 'https://www.casa.net'], 
'Tenerife':['https://www.tenerife.es', 'https://www.isladetenerife.com', 'https://tenerife.org'], 
'puertas':['https://www.puertas.com', 'https://www.puertas.es', 'https://www.puertas.net']

};

  
//tiene errores; a veces funciona y a veces no

  for(clave in vinculos){
      for(i = 0; i < vinculos[clave].length; i++){ 
        var x = Math.floor(Math.random() * vinculos[clave].length)   
    linkar(clave, vinculos[clave][x]);
           }
    }         

</script>

</body>



</html>

Parece que al principio funciona bien, pero después empieza a darme errores y a imprimir parte del código en pantalla. ¿Me podrían ayudar, por favor? A ver quién sabe lo que está mal.

Un saludo y muchas gracias

enxaneta · Answer 1 · 2019-02-10T20:06:47.273

Esta es mi solución. Como que tienes que poner las palabras clave dentro de una etiqueta <a> estoy creando una expresión regular con un grupo de captura:

`var regex = new RegExp(`(${buscar})`,'g');`

Por favor observa las paréntesis que crean el grupo.

Para utilizar un valor al azar del array utilizo Math.random():

let link = vinculos[buscar][~~((vinculos[buscar].length) * Math.random())];

Para recuperar el valor reemplazado y reutilizarlo utilizo "$1". Esto recupera el velor del primer grupo de captura de la expresión regular:

let elNuevoHtml = texto.replace(regex, `<a href="${link}" rel="nofollow noopener" target="_blank">$1</a>`);

let vinculos = {

'casa':['https://www.casa.com', 'https://www.casa.es', 'https://www.casa.net'], 
'Tenerife':['https://www.tenerife.es', 'https://www.isladetenerife.com', 'https://tenerife.org'], 
'puertas':['https://www.puertas.com', 'https://www.puertas.es', 'https://www.puertas.net']

};

function crearEnlace(buscar){
// crea una nueva expresión regular. 
  let regex = new RegExp(`(${buscar})`,'g');
// el enlace es un elemento escogido al azar dentro del array vinculos[buscar] 
  let link = vinculos[buscar][~~((vinculos[buscar].length) * Math.random())];
  let texto = elP.innerHTML

  let elNuevoHtml = texto.replace(regex, `<a href="${link}" rel="nofollow noopener" target="_blank">$1</a>`);
elP.innerHTML = elNuevoHtml;
}


for(clave in vinculos){
  crearEnlace(clave)
}

<p id="elP">La casa tiene 200 m2 y está situada en Tenerife. Tiene cuatro ventanas y dos puertas.</p>

Espero que sea lo que necesites.

Gracias, enxaneta, por tu aporte. Puede ser muy interesante, pero no tengo muchos conocimientos para comprenderlo. Mi nivel de javascript no es tan fuerte (no sé lo que es el let, ni un grupo de captura, los signos ~~, etc.) ¿Es javascript..? Un saludo — Pablo David Martín, Feb 10 '19 at 19:42
`let` es casi lo mismo que `var`. Si quires puedes cambiar `let` por `var` en este caso. **Un grupo de captura** es cuando pones una parte de una expresión regular entre paréntesis, en este caso la expresión buscada. Para saber más de expresiones regulares puedes leer esto: [¿Qué significa esta expresión regular? (Referencia de expresiones regulares)](https://es.stackoverflow.com/questions/223553/qu%C3%A9-significa-esta-expresi%C3%B3n-regular-referencia-de-expresiones-regulares/223582#223582). Los signos `~~` los puedes reemplazar con Math.floor(). — enxaneta, Feb 10 '19 at 19:58
Gracias por ayudarme y explicarme. La verdad es que no sabía que existían esas variantes o componentes de javascript. Un saludo — Pablo David Martín, Feb 11 '19 at 19:41

score 0 · Answer 2 · answered Feb 10 '19 at 12:58

Te sobra un for, tienes que recorrer las 3 posibles palabras y con el Math.random() le asignas una de las 3 posibilidades cada vez que entra en la página.

function linkar(texto, link) {
  html = document.querySelector("#parrafo").innerHTML;
  re = new RegExp(texto, 'g');
  if (re.test(html)) {
    html = html.replace(re, '<a href="' + link + '" rel="nofollow noopener" target="_blank">' + texto + '</a>');
  }
  document.querySelector("#parrafo").innerHTML = html;
}

vinculos = {
  'casa': ['https://www.casa.com', 'https://www.casa.es', 'https://www.casa.net'],
  'Tenerife': ['https://www.tenerife.es', 'https://www.isladetenerife.com', 'https://tenerife.org'],
  'puertas': ['https://www.puertas.com', 'https://www.puertas.es', 'https://www.puertas.net']
};

// Te sobraba un for
for (clave in vinculos) {
  var x = Math.floor(Math.random() * vinculos[clave].length);
  linkar(clave, vinculos[clave][x]);
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <p id="parrafo">La casa tiene 200 m2 y está situada en Tenerife. Tiene cuatro ventanas y dos puertas.</p>

</body>

</html>

Muchísimas gracias, Tiberius. Ahora parece que funciona. Me sacaste de un bloqueo. Un saludo — Pablo David Martín, Feb 10 '19 at 19:38

¿Cómo hacer que la url de los links en un texto con javascript vaya cambiando aleatoriamente cada vez que se refresca la página?

2 Answers2