Vamos a programar #83 - Expresiones regulares en javascript.

Hola de nuevo a todos, el día de hoy vamos a ver un poco más sobre expresiones regulares, pero ahora usando javscript. Hace poco mientras hacia un programa en javascript, me preguntaron por una forma automática de reemplazar los hashtags de twitter con un vinculo a la dirección correspondiente; es decir; si tenemos #anipoke, que se cree un vinculo a https://twitter.com/hashtag/anipoke (usando #anipoke cómo texto). La respuesta simple, es si, si se puede, pero para poder hacerlo, vamos a emplear expresiones regulares.

El trabajo de hoy es mas o menos entender cómo es que podemos usarlas en Javascript, la mayor parte de las expresiones que usamos en C#; por ejemplo; se pueden usar en javascript así que para probarlas, podemos usar un programa cómo el que sigue.

<!DOCTYPE html>

<html>
	<meta charset="UTF-8">
	<Title>Prueba de expresiones regulares</title>
	<head>
	<style>

	.found
	{
		color: gray;
		background-color: yellow;
	}
	</style>

	<script type="text/javascript">
		function FindRegex() {
			var Texto = document.getElementById('MAIN').innerHTML;
			var Patron =  new RegExp(document.getElementById('InputRegex').value,"g");
			var Result = Texto.match(Patron);
			var Words = [];
			var Ret = "";
			for (var x = 0; x <  Result.length; x++)
			{
				if (Words.includes(Result[x]) == false) Words.push(Result[x]);
			}

			for(var i = 0; i < Words.length; i++){
				var NewExp = new RegExp("\\b"+Words[i]+"\\b", "g");
				Ret = Texto.replace(NewExp, '<span class=\"found\">' + Words[i] + '</span>');
				Texto = Ret;
			}
			document.getElementById('demo').innerHTML = Ret;
		}

	</script>

	</head>
	<body>
		<div>
		<form>
			<span>Expresion regular para buscar</span>
			<br />
			<input  id="InputRegex" type="text"></input><br />
			<input  type="button" onclick="FindRegex()" value="Prueba" /><br />
		</form>

		</div>
		<div id="MAIN">Gente humano persona gente hombre mujer familia amigo conocido colega pareja esposo matrimonio amor Partes del Cuerpo Humano cuerpo pie, pierna talón espinilla
		rodilla muslo cabeza cara boca labios diente nariz bigote cabello oreja cerebro estómago brazo codo hombro uña mano muñeca palma dedo trasero, culo, cola abdomen
		hígado músculo cuello corazón mente alma+ cintura cadera corazón espalda sangre carne piel hueso pecho resfriado diarrea enfermedad Familia abuela abuelo esposa
		esposo hermana hermano hija hijo madre nieta nieto padre prima primo tía tío Vida criatura especie ser vida naturaleza campo bosque selva, jungla desierto costa playa
		río laguna, lago mar, océano cerro, monte, montaña Animales animal perro gato vaca cerdo caballo, yegua oveja mono ratón, rata tigre conejo dragón ciervo rana león jirafa
		elefante pájaro gallina gorrión cuervo águila halcón pez camarón langosta sardina atún calamar pulpo insecto bicho mariposa polilla saltamontes araña mosca
		mosquito cucaracha caracol babosa lombriz marisco molusco lagarto serpiente cocodrilo Plantas plantas pasto / césped flor fruta semilla árbol hoja raíz tallo hongo
		ciruela pino bambú nuez almendra castaña Cosechas arroz avena cebada trigo vegetal, verdura patatas, papas judías, guisantes, porotos rábano zanahoria manzana naranja plátano pera castaño
		durazno tomate sandía Alimentos alimento comida bebida carne gaseosa Espacio tiempo calendario edad época, era fecha segundo minuto hora día semana entre semana
		fin de semana mes año ayer hoy mañana amanecer mediodía tarde anochecer noche lunes martes miércoles jueves viernes sábado domingo ambiente espacio entorno
		sol luna estrella clima despejado nublado lluvia nieve viento trueno rayo tifón tormenta cielo Direcciones y Posiciones este oeste sur norte derecha izquierda
		arriba, encima abajo, debajo adelante, delante atrás, detrás centro, medio encima alrededor diagonal enfrente cerca lejos adentro, dentro afuera, fuera aquí acá ahí allá allí exterior exterior Materiales
		agua caliente calor frío fresco hielo vapor fuego gas aire, atmósfera tierra, suelo metal, metálico hierro cobre oro plata plomo sal barro, lodo arcilla yeso
		fumar tabaco opio marihuana Pesos y Medidas peso metro litro gramo kilo centi mili Sociedad sociedad comunidad reunión encuentro calidad estructura administración organización
		asociación empresa equipo obligación derecho permiso prohibición autoridad cargo campaña club comisión congreso constitución gobierno democracia dictadura presidente ministro director parlamentario, congresista, senador, diputado
		representante capital ciudad pueblo villa estado provincia departamento Economía economía consumo demanda compañía comercio producto transacción almacén hotel fábrica cuenta dinero
		billete vuelto, cambio máquina expendedora boleto, billete precio, tarifa Objetos hechos por el ser humano Hogar escritorio silla mesa cama puerta dormitorio habitación cuarto oficina panel puerta ventana entrada hogar
		casa apartamento, departamento edificio construcción elevador, ascensor escalera cámara Herramientas aparato cámara aguja clavo hilo cuerda, cordel, cordón bolsillo bolso bolsa paraguas parasol pomo llave
		trancar arma escultura cuadro grabado energía electricidad corriente Ropa ropa prenda manga solapa, cuello botón cremallera cinturón zapato gafas Transportes transporte, transporte público, transporte privado tránsito, tráfico
		vía férrea tren, ferrocarril subterráneo, metropolitano camino vía ruta calle carretera autopista avenida estación, parada avión aeropuerto automóvil, coche, auto bus, autobús, ómnibus Lenguaje número alfabeto raíz, origen, fuente papel carta
		periódico, diario diccionario computadora, ordenador idioma extranjero japonés inglés chino alemán español francés Colores color rojo naranja, anaranjado amarillo verde azul violeta blanco negro rosa, rosado
		marrón, café gris Actividades cultura autor arte cine dibujo pintura música religión dios artículo educación escuela instituto colegio universidad clase curso estudio
		formación análisis investigación conocimiento idea información dato forma estilo figura elemento comunicación expresión periodismo ciencia aritmética historia geografía educación física deporte carrera
		competición, competencia documento informe información noticia necesidad falta significado cáracter personalidad pensamiento memoria recuerdo deseo alegria tristeza enojo placer, éxtasis empatía interés aburrimiento
		cansancio sorpresa susto miedo, temor ejemplo ayuda favor apoyo búsqueda duda pregunta respuesta cuestión solicitud decisión elección consejo sugerencia orden control sistema
		trabajo empleo profesión esfuerzo Números cero uno dos tres cuatro cinco seis siete ocho nueve diez cien mil millón Espacio cosa
		lugar aspecto contenido cantidad área volumen ancho, anchura posición dirección tamaño largo, longitud alto, altura aumento reducción crecimiento fondo frente Sustantivos abstractos esto eso aquello
		cual secreto automático formalidad presente pasado futuro acción actividad acto acuerdo actitud capacidad concepto condición caso conjunto grupo creación destrucción origen
		destino objetivo, meta función intento logro efecto resultado éxito fracaso causa consecuencia beneficio perjuicio ataque defensa conflicto guerra carácter característica crisis cambio
		desarrollo progreso avance retroceso mejora6 deterioro comienzo, inicio transcurso fin, final, cabo etapa fase grado corte interrupción espera diferencia similitud sensación dolor sentido conciencia
		percepción fuerza potencia existencia experiencia Adjetivos Adjetivos de calidad bueno, buen malo superior inferior central lateral frontal trasero, posterior cierto falso mayor menor absoluto relativo
		caro barato viejo joven nuevo cada cualquier dado actual reciente capaz cuyo, cuya fácil, simple, sencillo difícil, complicado estricto serio general particular común especial raro, extraño
		fuerte débil correcto, acertado incorrecto, desacertado contrario, opuesto, inverso diferente, distinto parecido, similar otro diverso Adjetivos de forma alto bajo arriba abajo, debajo adelante, delante atrás, detrás gran grande pequeño amplio angosto
		compacto delgado grueso Adjetivos sensoriales ligero pesado suave firme flexible duro blando caluroso frío fresco delicioso, apetitoso horrible dulce picante salado amargo anterior
		posterior cercano lejano Sentimiento feliz triste solo solitario contento tranquilo calmo agitado ansioso interesado aburrido cansado sorprenido asustado, atemorizado doloroso picante, ardiente apestoso, maloliente
		Verbos Auxiliares ser estar haber Existencia aparecer desaparecer existir cambiar crecer vivir nacer morir romper Movimiento ir venir volver hacer empezar, comenzar, iniciar
		terminar, acabar abandonar, dejar hacer partir lanzar sujetar golpear patear golpear señalar apuñalar morder clavar levantar pegar moverse bailar andar saltar caer volar
		nadar sentarse correr arrojar lanzar coger agarrar poner alcanzar acercar alejar Sensaciones sentir ver oír, escuchar tocar oler percibir Comunicación comunicarse afirmar
		negar decir hablar callar escribir leer Emociones amar querer desear odiar, detestar triste llorar reír enfadado admirar, alabar, elogiar alegrarse, encantado consolar interesarse aburrirse cansarse
		sorprenderse asustarse, atemorizarse Actividades analizar pensar dormir cantar morder comer beber acordar afectar generar añadir, agregar mejorar empeorar avanzar retroceder ayudar complicar reunirse
		entrevistar abrir, desenvolver jugar recoger levantar tomar vender tener faltar dar recibir romper doblar cortar comprar vender llevar puesto cambiar intercambiar sustituir, reemplazar cerrar
		buscar encontrar obtener, conseguir crear creer entrar quedarse salir abandonar dejar comunicar considerar comparar evaluar decidir intentar evitar construir destruir deber poder
		conocer entender, comprender atar saber cansarse salir trabajar separar, dividir, partir descansar dormir romper aceptar rechazar descartar acompañar pedir, solicitar pretender proponer sugerir usar hacer
		fabricar arreglar, reparar explicar mostrar probar, intentar comprobar, verificar variar esperar necesitar, precisar significar Adverbios Adverbios de cantidad más menos muy mucho poco algo casi aproximadamente exactamente
		bastante demasiado sólo tan tanto todo nada cómo cuándo cuánto cuál, cuáles dónde Adverbios de calidad bien mal mejor peor regular despacio deprisa tal
		como aprisa adrede claro exacto obvio ante contra inclusive además únicamente especialmente incluso viceversa siquiera finalmente Adverbios temporales antes anteriormente ahora ya
		todavía aún mientras durante después luego pronto tarde temprano ayer anoche hoy mañana enseguida ahora de nuevo siempre Adverbios de posibilidad siempre nunca jamás
		también tampoco quizá(s) acaso tal vez Otros adverbios aun incluso sólo incluso sobre solamente hasta sin embargo pero por ejemplo sólo, solamente justo apenas a en
		desde entre hasta ante demasiado también Pronombres adjetivales este, esta ese, esa aquel, aquella algún, alguna alguien algo ambos Interjecciones sí no Conjunciones si tal vez entonces
		cuando, si mientras hacia para de, del con sin así asimismo también aunque y o Locuciones acerca de a lo mejor a pesar de por favor gracias  </div><br/>
		<div id="demo"></div>
	</body>
</html>


Por ahora solo vamos a probar algunas expresiones. Al igual que en c#, en el código anterior hay una lista de las 1000 palabras mas comunes y vamos a probar todos los ejemplos que previamente ya habíamos usado.

\ba\w+\b
\ba\w+n\b
\b(\w+[xyz]|\w+[xyz]\w+|[xyz]\w+)\b
\b\w\w\w\w\w\w\w\w\w\w\w\w\w\w\w\b
\b\w{15}\b
\b\w{10,}\b

Hay algunos detalles que hay que "corregir", por ejemplo si buscamos palabras con seis letras veremos que "música" no se resalta, pero eso no quiere decir que no nuestra expresión regular este mal, si no que simplemente está incompleta, y la razón principal es que la letra ú (u con acento) no es considerada una letra "normal" dentro del estándar ascii por lo que simplemente lo considera un carácter NO alfanumérico. La solución para eso es sencilla, pero eso será en el próximo post.

Y bien, por ahora es todo, cómo de costumbre puedes bajar el código de mi dropbox para que lo pruebes y lo edites según lo necesites. En el  siguiente post veremos cómo manejar los acentos (y otro tipo de letras) e implementaremos la solución a nuestro problema inicial.

Los leo luego.

No hay comentarios.