daveruiz.net blog

Otro pequeño aporte para resaltar las teclas de acceso rápido (el atributo ‘accesskey’) de los enlaces, cómo no, con la ayuda de jQuery (en este caso pequeña). Muy útil, por ejemplo, para la realización de menús de navegación sin tener que ‘ensuciar’ el HTML.

Primero, necesitamos asignar un estilo a la letra a resaltar. Optaremos por un simple subrayado.

a .accesskey {
	text-decoration:underline;
}

Y ahora viene la magia. Realizamos un recorrido por los enlaces de la página y realizamos el cambio:

$("a").each( function() {
	var html, reg, rep;
	if (this.accessKey)
	{
		html = $(this).html();
 
		if (!/</g.test(html))
		{ 	// No contiene HTML
			reg = new RegExp("("+this.accessKey+")","i");
			rep = "<span class='accesskey'>$1</span>";
		}
		else
		{ 	// Contiene HTML
			reg = new RegExp("(<[^>]*>.*)("+this.accessKey+")(.*</[^>]*>)", "i");
			rep = "$1<span class='accesskey'>$2</span>$3";
		}
 
		$(this).html( html.replace( reg, rep ) );
	}
});

Evidentemente, será requisito que el texto del enlace contenga la letra equivalente a la tecla de acceso rápido.

Y muy importante, por supuesto, realizar este escaneo una vez sea accesible el DOM completo de la página.

$(document).ready( function() {
 
	// Nuestro script
 
} );