Nuevos Programadores

Una expresión regular es un conjunto de caracteres y símbolos que definen una cadena según un patrón y no por sus elementos; por ejemplo, si queremos representar una cadena de caracteres que sólo puede estar formada por las letras a, b, c y los números del 1 al 3, utilizaremos el siguiente patrón: ^([a,b,c,1,2,3]+)$.

Ahora veamos los signos básicos en las expresiones regulares y su significado:

Esos son los signos básicos de las expresiones regulares, también tenemos la barra invertida, que se utiliza como caracter de escape en ciertos casos, cuando se desea incuir un caracter especial como ., * o ?, y para definir tipos de caracteres en otros, vemos algunos casos.

Esta es una introducción muy básica al uso de expresiones regulares, simplemente hemos visto algunos de los signos más básicos, en la próxima parte de este artículos veremos como crear algunas expresiones un poco más complejas. Mientras tanto pueden ir probando algunas expresiones en regexpal.com, un intérprete online de expresiones regulares.

}

Seguramente todos han visto alguna vez una página que resalta las palabras clave nuestra búsqueda, y eso es lo que podemos lograr con estas 2 funciones de JavaScript y las siempre útiles expresiones regulares, por supuesto se puede hacer todo en una misma función, pero la idea es poder reusar el código.

La primera función se encargará de extraer el valor de un parámetro de nuestra URL usando expresiones regulares y sólo devolverá el valor. Se tuvo en cuenta que un parámetro de URL siempre estará precedido por uno de estos signos: ? ó & y que el valor del mismo se encontrará precedido del signo = y podrá ser sucedido por uno de los siguientes: & ó #.
A la hora de devolver el valor del parámetro seleccionado se utiliza una nueva expresión regular para reemplazar los signos + ó %20 por espacios en blanco, y en caso de que no se encuentre el parámetro devuelve un string vacío.

function leerParametros() {
	var parametro = 's'; //nombre del parámetro con las palabras de la búsqueda
	var regex = new RegExp('(\\?|&)('+ parametro + '=)([^&#]*)', 'i'); //regex para extraer el valor del parámetro
	var resultado = regex.exec(window.location.href); //ejecuta la regex sobre nuestra URL actual
 
	if(resultado != null) {
		replaceRegex = new RegExp('\\+|%20', 'g'); //regex para reemplazar signos por espacios
		return resultado[3].replace(replaceRegex, ' '); // devuelve la 3 coincidencia de la regex con el reemplazo para los espacios
	} else {
		return ""; //si la regex no encuentra el parámetro se devuelve un string vacío
	}
}

Luego utilizamos la función que realmente va a resaltar nuestras palabras clave, lo que haremos será obtener el valor del parámetro con la función anterior y mediante una expresión regular rodearemos cada instancia del texto con un tag <span> que tendrá un atributo style para darle la apariencia mediante css.

En esta expresión regular utilizamos paréntesis para poder capturar la coincidencia de texto como $1, ya que sino la estaríamos reemplazando por el texto buscado y es muy posible que no se respete la capitalización del texto original.

function resaltar() {
	var textoOriginal = leerParametros(); //obtiene el valor del parámetro
	var textoNuevo = "<span style=\"background-color: #ff0; font-weight: bold;\">$1</span>"; //define el texto a insertar por cada coincidencia de la regex
	var regex = new RegExp('('+textoOriginal+')', 'ig'); regex con modificadores ig, o sea no sensible a mayúsculas y minúsculas (i) y reemplazar todas las existencias (g)
	document.body.innerHTML = document.body.innerHTML.replace(regex, textoNuevo); //reemplazo sobre el html del body
}

Por último sólo resta hacer el llamado en el documento de destino, para lo cual lo ideal sería asignar la función resaltar() al evento onload del documento, pero eso no me funcionó, por lo que lo inserté al final del mismo:

		<script type="text/javascript">
				resaltar();
		</script>
	</body>
</html>

Sigue este enlace para ver el ejemplo funcionando.

}