JavaScript: come usare il metodo replace() con i riferimenti ai gruppi delle espressioni regolari

Sicuramente vi sarà capitato di usare il metodo replace() con le espressioni regolari e di rimanere confusi di fronte al fatto che quando si usano i riferimenti ai gruppi ($1, $2 eccetera), la sostituzione delle stringhe sembra non funzionare. Questo è normale se nell'espressione regolare non avete usato correttamente i gruppi (appunto), ossia non avete delimitato con parentesi tonde quei sottopattern che l'epressione regolare dovrebbe catturare. Se non ci sono gruppi, non ci sono riferimenti da usare. Vediamo in dettaglio questo aspetto del problema.

Partiamo da questa stringa di testo contenuta in un elemento:

<p id="test-1">a) Lorem ipsum dolor</p>

Vogliamo mettere in grassetto la sottostringa a). Quindi dobbiamo usare replace() sul contenuto HTML dell'elemento:

function replaceGroups(element) {
    var str = element.innerHTML;
    element.innerHTML = str.replace(/([a-z]\))/g, '<strong>$1</strong>');
}

replaceGroups(document.getElementById('test-1'));

Il nostro gruppo è ([a-z]\)), ossia una lettera seguita da una parentesi tonda di chiusura. Il riferimento $1 contiene a), che viene restituito all'interno di un elemento strong.

Possiamo usare i riferimenti anche all'interno di una funzione di callback del metodo replace(). Ad esempio, qualora volessimo trasformare un nome utente di Twitter testuale in un link HTML, potremmo scrivere:

function replaceGroupsCallback(element) {
    var str = element.innerHTML;
    element.innerHTML = str.replace(/@(\w+)$/g, function($1) {


        return '<a href="http://twitter.com/' + $1.replace('@', '') + '">' + $1 + '</a>';

    });

}

In altre parole, i riferimenti ai gruppi funzionano al meglio se sono effettivamente presenti dei gruppi all'interno delle espressioni regolari usate nel metodo replace(). Il secondo esempio, ovvero la funzione di callback, funziona in genere anche quando non si usano esplicitamente i gruppi.

Potete visionare l'esempio finale in questa pagina.