Come effettuare il replace di una stringa con jQuery?

jQuery non dispone nativamente di di una funzione replace (sostituisci), in quanto tale funzionalità è già incorporata nel linguaggio Javascript e, pertanto, gli sviluppatori della libreria non hanno ritenuto necessario sviluppare un metodo ad hock in quanto sarebbe stato ridondante.

Il metodo replace in Javascript

Vediamo di seguito come funziona il metodo replace di Javascript:

// definisco una stringa
var invito = "Visita il mio sito";

// applico una sostituzione all'interno della string
var nuovo_invito = invito.replace("il mio sito", "Mr. Webmaster");

Una volta lanciato il codice la variabile nuovo_invito avrà il seguente valore:

Visita Mr. Webmaster

Per approfondire l'argomento suggersico la lettura di questo post dedicato al metodo replace di Javascript.

Continua dopo la pubblicità...

Estendere replace grazie a jQuery

Se vogliamo effettuare una sostituzione all'interno di una stringa di testo jQuery non è necessaria. Ma se vogliamo sostituire una porzione di testo all'interno di un nodo HTML, la questione si fa più complicata e l'ausilio della nostra libreria preferita potrebbe rivelarsi utile...

Supponiamo di voler effettuare una sostituzione in tutti i paragrafi del nostro documento HTML. Per farlo, utilizzando jQuery, potremmo scrivere un codice come questo:

$('p').each(function() {
  var str = $(this).text();
  str = str.replace('il mio sito', 'Mr. Webmaster');
  $(this).text(str);
});

Il nostro codice non fa altro che effettuare un ciclo di tutti i paragrafi, estrarne il contenuto di testo, applicare la sostituzione, e settare nuovamente il contenuto con il risultato ottenuto.

il codice visto sopra è corretto nel momento in cui i nostri paragrafi contengano puro testo, in quanto l'eventuale formattazione HTML andrebbe persa (si pensi, ad esempio ad eventuali <span> o <strong>).

Per mantenere tale formattazione il codice visto in precedenza andrebbe leggermente modificato in questo modo:

$('p').each(function() {
  var str = $(this).html();
  str = str.replace('il mio sito', 'Mr. Webmaster');
  $(this).html(str);
});

Nel caso specifico il codice non presenta alcun problema ed il risultato voluto viene raggiunto perfettamente.

In talune circostanze, tuttavia, effettuare un semplice replace all'interno di un codice HTML potrebbe comportare un certo rischio in quanto l'utilizzo di determinate parole potrebbe incidere sulla struttura HTML del documento creando delle anomalie impreviste.

Facciamo un esempio: supponiamo di voler cercare e sostituire la parola "strong" con "resistant"... ma "strong" è anche un tag HTML! Facendo una semplice sostituzione di testo potremmo ritrovarci con un output del genere:

The <resistant>iron</resistant> is very resistant!

Come possiamo vedere il replace ha coinvolto anche i tag HTML. Come fare, quindi, a preservare il markup durante una sostituzione sul testo?

Allo scopo ho recentemente scoperto una interessante utilità su Github: si tratta di jQuery.replace.js, una piccola utility (pesa meno di 2 kb) che permette di cercare e sostituire, usando stringhe o espressioni regolari, all'interno di documenti HTML, mantenendo intatto il markup e modificando solo il testo.

Una volta incluso il file nella nostra pagina web avremo a disposizione la seguente sintassi per effettuare una sostituzione semplice all'interno del testo di un dato elemento del DOM, ad esempio:

// sostituisco in tutti i paragrafi la stringa "il mio sito" con "Mr. Webmaster"
$('p').replace('il mio sito', 'Mr. Webmaster');

Questo codice cercherà uno specifico testo all'interno dell'elemento con l'ID specificato senza intaccarne la struttura HTML.

L'utility in oggetto consente di utilizzare anche la ricerca mediante espressioni regolari:

// sostituisco tutte le occorrenze della prola "sito" con "website"
$('p').replace(/sito/g, 'website');

I flag g e i consentono, rispettivamente, di effettuare sostituzioni globali (quindi di sostituire tutte le occorrenze trovate e non solo la prima) e case insensitive.

I commenti degli utenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.