Hola, en esta ocasión veremos un ejemplo de como extraer una url de un textarea mezclando un poco de jQuery y Javascript. La intención es detectar el evento keyup del textarea para ir realizando una búsqueda con el método match() de Javascript pasando como argumento una expresión regular preparada para indexar urls, si ha sido encontrada alguna url, mostrar la primera coincidencia en un link. Este básico ejemplo puede servir para implementar los típicos loaders de los comentarios que podemos encontrar en plataformas como Facebook ó Twitter, una buena idea como siempre es utilizar la teconolgía AJAX para procesar la url en el servidor por ejemplo con PHP.
- Simple demostración, escribe alguna url tipo: https://www.google.com ó http://www.google.com.es ó http://google.com/home/index.php ...
Código del ejemplo
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<script>
$(function(){
//Evento que ocurre cuando se suelta la tecla
$("#textarea").on("keyup", function(){
//Obtener el texto del textarea
texto = $(this).val();
//Realizar una búsqueda de urls en el textarea
res = texto.match(/http(s)?\:\/\/(www\.)?[a-z0-9\-\.]+[^www\.](\.[a-z]{2,4})[a-z0-9\/\-\_\.]*/i);
//Si hay resultados
if (res !== null)
{
//Mostrar la primera url encontrada
$("#link-resultado").text(res[0]).attr("href", res[0]);
}
else
{
//De lo contrario no mostrar nada
$("#link-resultado").text('').attr("href", '');
}
});
});
</script>
</head>
<body>
<textarea id="textarea" style="width: 100%; height: 150px;"></textarea>
<div id="resultado">
<a id="link-resultado" href="" target="_blank"></a>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario