0

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

2 respuestas 2

0

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>

1
  • Muchísimas gracias, Tiberius. Ahora parece que funciona. Me sacaste de un bloqueo. Un saludo el 10 feb. 2019 a las 19:38
0

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.

3
  • 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 el 10 feb. 2019 a las 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). Los signos ~~ los puedes reemplazar con Math.floor().
    – enxaneta
    el 10 feb. 2019 a las 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 el 11 feb. 2019 a las 19:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.