Nuevos Programadores

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.

También te puede interesar:

• Validar formularios web con JavaScript y Expresiones Regulares
• Aprendamos a usar Expresiones Regulares (parte 1)
• Aprendamos a escribir funciones recursivas