2

Si creo un texto de la siguiente forma:

function urlify(text) {
    var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?  =~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    });
}

document.addEventListener("DOMContentLoaded",function(){
var m = document.getElementById("m");
var t = prompt('Ingresa texto','Texto:');
var p = "";
var nombre = prompt('nombre de usuario','');
var testd = urlify(t);
if(testd.indexOf('href="') != -1) {
p = document.createElement("A")
}
else {
p = document.createElement("P")
}
var texto = document.createTextNode(nombre + ": " + testd);
p.style.color = "white";
p.appendChild(texto);
m.appendChild(p);
});
#m {width:300px:height:200px;background-color:rgba(21,21,21,0.75)}
<div id="m">



</div>

Explico:

Creo el controlador addEventListener, para ejecutar cuando todo los elementos esten cargados, defino m que es el div, defino t que es el texto que ingresara, defino p que sera un createElement, segun un IF, este if sera true segun una funcion que verifica si es un link de tipo http://link.com, si se verifica true, crea un elemento A, sino uno P, luego creo el texto con createTextNode y en los argumentos, le paso el nombre , un separador ": " y el texto, de manera que quedaria como:

Usuario: mensaje

El problema es que como puedo hacer para que el nombre aparezca de OTRO COLOR que el del mensaje, y además al intentar CREAR el elemento A, no aparece como LINK

1 respuesta 1

1

Veo algunos problemas:

  1. Con la función urlify, si es una url la transformas a una cadena del tipo <a href="url">url</a>. Y al crear un nodo de texto con createTextNode, esa cadena no se transformará a un enlace, sino que se mantendrá como texto literal. Podría interpretarse como elemento (y verse el enlace) si lo añadieras con innerHTML al elemento en lugar de creando un nodo de texto.

    Solución: Añade el texto como nodo de texto sólo si no es un enlace, y usa innerHTML sólo si es una URL válida y ha sido procesado como tal (ojo: este método no es el mejor porque puede sufrir ataques de XSS, sería mejor que cambiaras urlify para que devolviera true/false y crear un enlace adecuadamente).

  2. Incluso si la url se devolviera como elemento a, se crearía un a al que no le estás asignando ningún href por lo que no se mostraría como enlace. Y además, el HTML generado sería inválido, porque entonces tendrías un a dentro de otro a (en la forma <a>usuario <a>url</a></a>) y el resultado podría no ser el esperado.

    Solución: No hace falta que crees un elemento a si es una URL, ya has creado el elemento a si es un enlace en urlify. Crea siempre un p.

  3. Para que el nombre de usuario se muestre con otro color, vas a tener que envolverlo en una etiqueta propia. Esto es porque en CSS no hay (al menos de momento) un selector para la primera palabra de la frase.

    Solución: crea un elemento span y envuelve el nombre del usuario con él. Con CSS dale estilos a ese span para que se vea de diferente manera.

Entonces los cambios a hacer serían:

function urlify(text) {
  var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?  =~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
  });
}

document.addEventListener("DOMContentLoaded", function() {
  var m = document.getElementById("m");
  var t = prompt('Ingresa texto', 'Texto:');
  var p = "";
  var nombre = prompt('nombre de usuario', '');
  var testd = urlify(t);
  p = document.createElement("P")
  
  // creamos y rellenamos un span para el nombre del usuario
  var nombre_tag = document.createElement("span");
  var nombre_txt = document.createTextNode(nombre);
  nombre_tag.className = "nombre-usuario";
  nombre_tag.appendChild(nombre_txt);
  p.appendChild(nombre_tag);
  
  // dependiendo del valor devuelto por urlify creamos un enlace o no
  if (testd.indexOf('<a href="') != 0) {
    var texto = document.createTextNode(": " + testd);
    p.appendChild(texto);
  } else {
    p.innerHTML += ": " + testd;
  }
  
  p.style.color = "white";
  m.appendChild(p);
});
#m {
  width: 300px:height:200px;
  background-color: rgba(21, 21, 21, 0.75)
}

.nombre-usuario {
  color: rgba(255, 255, 0, 0.85);
}
<div id="m">



</div>

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.