JavaScript: uso avanzato del metodo replace()

In questo articolo vedremo come applicare questo metodo in modo avanzato.

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 pattern secondari che l'espressione regolare dovrebbe catturare. Se non ci sono gruppi, non ci sono riferimenti da usare.

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:

'use strict';

const replaceGroups = element => {
    let 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:

'use strict';

const replaceGroupsCallback = element => {
    let str = element.innerHTML;
    element.innerHTML = str.replace(/@(\w+)$/g, $1 => {
        return '<a href="https://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.