Seleccionar enlaces con fragmentos (href=»#») con jQuery

Los identificadores de fragmento, o simplemente fragmentos, son pequeñas cadenas de texto que aparecen al final de las URLs después del símbolo # (almohadilla o hash). Estas cadenas identifican a un recurso subordinado a un recurso principal.

En el caso documentos HTML, los fragmentos identifican a una sección del documento, generalmente mediante el uso de anclajes o puntos de fijación:

<a href="http://sitio.com/pagina.html#seecion-3">
    Ir a la sección 3 de pagina.html
</a>

Seleccionar estos enlaces con jQuery es muy sencillo mediante los selectores de atributo. Por ejemplo, podemos seleccionar todos los enlaces que contengan # en la URL:

var links = $( 'a[href*="#"]' );

Podríamos excluir los enlaces que consistan sólo en # (<a href="#">) de la selección anterior:

var links = $( 'a[href*="#"]:not([href="#"])' );

O, por poner otro ejemplo, seleccionar un enlace con un hash concreto:

var links = $( 'a[href*="#seccion-45"]' );

Pero la cuestión principal por la que quería escribir este post no era por algo tan sencillo sino por avisar de un bug que había en jQuery y que hacía funcionar la selección de enlaces con fragmentos utilizando una sintaxis incorrecta que no utiliza las comillas para el valor del atributo href.

Por ejemplo, esta expresión funcionaba:

var links = $( 'a[href*=#seccion-45]' );

Pero la sintaxis correcta sería:

var links = $( 'a[href*="#seccion-45"]' );

Este bug fue solucionado en jQuery 1.12 y a partir de esta versión la selección de enlaces con # que no utilicen las comillas generan avisos del tipo:

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

Lamentablemente Internet está repleto de ejemplos que utilizan la sintaxis incorrecta y que ya no funcionarán. WordPress se vio afectado tras la versión 4.5 cuando incluyó jQuery 1.12. Así que si os véis con este error, ya sabéis el motivo y como solucionarlo 😉