jQuery Manual: expresiones regulares

Mostrando entradas con la etiqueta expresiones regulares. Mostrar todas las entradas

martes, 8 de septiembre de 2015

Extraer url de un textarea con jQuery y Javascript

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>

Reemplazar todas las coincidencias de una palabra completa con Javascript

A continuación podréis ver un ejemplo práctico de como reemplazar todas las palabras completas de un texto con Javascript, para tal tarea crearemos una expresión regular con la palabra a buscar entre los caracteres especiales \b (Word Boundary), esto nos permitirá limitar la búsqueda a sólo palabras completas, en este caso, si por ejemplo queremos buscar la palabra "ola" en un texto, "hola", "caracola", ... serán ignoradas y es requisito que la palabra sea "ola" exclusivamente. A la expresión regular también le incluiremos las condiciones "i" e "g", "i" para ignorar mayúsculas y minúsculas, por ejemplo, "oLa", "Ola", "olA", .. son válidos y "g" para buscar-indexar todas las coincidencias.

<script>
	window.onload = function(){
		texto = document.getElementById("texto").innerHTML;
		//la condición "i" en la expresión regular ignora mayúsculas y minúsculas
		//la condición "g" en la expresión regular busca todas las coincidencias
		buscar = /\bzapato\b/gi;
		reemplazar = "Javascript";
		document.getElementById("resultado").innerHTML = texto.replace(buscar, reemplazar);
	};
</script>

<h3>Reemplazar todas las coincidencias de una palabra completa con Javascript</h3>
<div id="texto">
	zapato gazapato mato Zapato gato arrebato pato gato zaPato zapatón
</div>
<h3>El Resultado</h3>
<div id="resultado"></div>

miércoles, 7 de mayo de 2014

VídeoTutorial Jquery 15 - Manejar strings (match, substr)

Bienvenid@s, en este capítulo veremos dos funciones Javascript fundamentales para el manejo de strings, la primera de ellas es match(), esta función es muy útil para realizar búsquedas y sobre todo para la validación de campos de formularios con expresiones regulares, la otro función es substr() que nos va a permitir extraer un substring de un string.

lunes, 21 de mayo de 2012

Expresiones Regulares con jQuery match()

Expresiones Regulares con Jquery match()

En esta ocasión vamos a ver una forma sencilla de comprobar los valores que son enviados a través de campos de texto, textarea, etc...

Accederemos a dichos valores a través de la función attr() y a través del atributo value del mismo elemento.

Al final de este post podéis encontrar un simple ejemplo de cómo utilizarlo.

$("#texto").attr("value").match("Aquí la expresión regular");

A continuación voy a comentar para vuestro uso diferentes expresiones regulares que podréis utilizar...

//para números, útil para filtrar los famosos ids.
numeros = /^[0-9]+$/;

//sólo letras, pero esto no incluye los acentos, así que si introduces á no es correcto.
letras = /^[a-zA-Z]+$/;

//para caracteres latinos(acentos), espacios y guiones bajos. el espacio se indica con \s.
letras_latinas = /^[0-9a-zA-ZáéíóúàèìòùÀÈÌÒÙÁÉÍÓÚñÑüÜ_\s]+$/;

//para emails, válidos pueden ser: miemail@gmail.com, mi.email@gmail.es, ...
email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/;

//passwords que tienen que contener tanto números como letras
password = /^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i;

//Para urls
url = /^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.([a-z]{2,6})?([\.\-\w\/_]+)$/i;

//para localhost
localhost = /^http:\/\/(localhost|127\.0\.0\.1)/;

//Para códigos postales
codigo_postal = /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/;

//Para el Documento NIF
NIF = /^\d{8}[a-zA-Z]{1}$/;

//Para el Documento CIF
CIF = /^[a-zA-Z]{1}\d{7}[a-zA-Z0-9]{1}$/;

//Para el documento NIE
NIE = /^[XxTtYyZz]{1}[0-9]{7}[a-zA-Z]{1}$/;

//Tarjetas de crédito VISA
VISA = /^4[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;

//Tarjetas de crédito MASTERCARD
MASTERCARD = /^5[1-5][0-9]{2}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;

//Fecha formato: 12/12/2014
fecha = /^([0-9]{2}\/[0-9]{2}\/[0-9]{4})$/;

//Números enteros y decimales
floatRegex = /[-+]?([0-9]*\.[0-9]+|[0-9]+)/;

//1 número entre el 1 el 50
number1to50Regex = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;

//Validar tarjetas de crédito
creditCardRegex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/;

//Validar nombre
usernameRegex = /^[a-z0-9_-]{3,16}$/;

//Validar password
passwordRegex = /^[a-z0-9_-]{6,18}$/;

//Validar números de teléfono
phoneNumber = /^[0-9-()+]{3,20}/;

//Buscar Fecha (e.g. 21/3/2006)
dateRegex = /(\d{1,2}\/\d{1,2}\/\d{4})/gm;

//Buscar Fecha en formato MM/DD/YYYY
dateMMDDYYYRegex = /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$/;

//Buscar fecha en formato DD/MM/YYYY
dateDDMMYYYRegex = /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.](19|20)\d\d$/;

//Buscar una url
urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

//Buscar nombre de dominio (con HTTP)
domainRegex = /(.*?)[^w{3}\.]([a-zA-Z0-9]([a-zA-Z0-9\-]{0,65}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}/igm;

//Buscar nombre de dominio (sólo con www.)
domainRegex = /[^w{3}\.]([a-zA-Z0-9]([a-zA-Z0-9\-]{0,65}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}/igm;

//Buscar nombre de dominio alternativo
domainRegex = /(.*?)\.(com|net|org|info|coop|int|com\.au|co\.uk|org\.uk|ac\.uk|)/igm;

//Buscar subdominios: www, dev, int, stage, int.travel, stage.travel
subDomainRegex = /(http:\/\/|https:\/\/)?(www\.|dev\.)?(int\.|stage\.)?(travel\.)?(.*)+?/igm;

//Buscar jpg, gif o png imagen
imageRegex = /([^\s]+(?=\.(jpg|gif|png))\.\2)/gm;

//Buscar todas las imagenes
imgTagsRegex = /<img.+?src=\"(.*?)\".+?>/ig;

//Buscar imagenes sólo con formato .png
imgPNG = /<img.+?src=\"(.*?.png)\".+?>/ig;

//Buscar cadena RGB (color)
rgbRegex = /^rgb$(\d+),\s*(\d+),\s*(\d+)$$/;

//buscar cadena hex (color)
hexRegex = /^#?([a-f0-9]{6}|[a-f0-9]{3})$/;

//Buscar tags html (v1)
htmlTagRegex = /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/;

//Buscar todos los .js incluidos
jsTagsRegex = /<script.+?src=\"(.+?\.js(?:\?v=\d)*).+?script>/ig;

//Buscar todos los .css incluidos
cssTagsRegex = /<link.+?href=\"(.+?\.css(?:\?v=\d)*).+?>/ig;

El código de un ejemplo para validar sólo números ...

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function() {
if ($(":text#texto").attr("value").match(/^[0-9]+$/)) {
alert("Bien");
}
else {alert("Esto no son números");}
});
});
</script>

</head>
<body>
<input type="text" id="texto">
<input type="button" id="boton" value="Sólo números">
</body>
</html>

jQuery Manual