JavaScript: come effettuare il parsing di un'espressione CSS contenente selettori

Alcune librerie JavaScript utilizzano le espressioni regolari per il parsing dei selettori CSS. Quella che segue è un'implementazione di una semplice funzione che trasforma in un array un'espressione CSS contenente i selettori.

La funzione è la seguente:

'use strict';

const parseCSSSelector = expression => {

	const chunker = /((?:\([^\)]+\)|\[[^\]]+\]|[^ ,\(\[]+)+)(\s*,\s*)?/g;
	const parts = [];

	chunker.lastIndex = 0;

	while ( (m = chunker.exec(expression)) !== null ) {
  		parts.push( m[1] );
  
  		if ( m[2] ) {
    		break; // stop quando si incontra una virgola
  		}
	}
	return parts;	
}

Esempi d'uso:

console.log(parseCSSSelector('#test div.foo'));
console.log(parseCSSSelector('div.class > span:not(:first-child) a[href]'));

Il segreto del parsing in questo caso sta nell'espressione regolare usata. Come si può notare, tale espressione tiene anche conto degli spazi e dei token letterali che nei CSS hanno la funzione di selettori (come il segno di maggiore).

Risulta chiaro come una volta ottenuti i vari selettori si possano quindi estrarne gli elementi per lavorare sul DOM.

const parts = parseCSSSelector('#test div.foo');
const [first, second] = parts;

const test = document.querySelector(first);
const foo =  test.querySelector(second);