Articolo originale: https://www.freecodecamp.org/news/javascript-replace-how-to-use-the-string-prototype-replace-method-js-example/

Il metodo String.prototype.replace() cerca la prima stringa corrispondente alla ricerca e la sostituisce con quella specificata. Tutto ciò avviene senza mutare la stringa originale.

Questo metodo funziona anche per espressioni regolari, quindi l'elemento che stai cercando può essere espresso con un espressione regolare.

Il valore da restituire così come quello sostituito può essere espresso come una stringa o una funzione.

Sintassi di base del metodo String.prototype.replace()

const variable = variable.replace("stringToReplace", "expectedString");

Userai il metodo replace():

  • assegnando la stringa iniziale (o le stringhe iniziali) a una variabile
  • dichiarando un'altra variabile
  • per il valore della nuova variabile, anteponendo il nome della prima variabile a .replace()
  • separando con una virgola la stringa che vuoi sostituire e la stringa desiderata tra le parentesi

Esempi del metodo String.prototype.replace()

Ecco un esempio di base:

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

Nell'esempio qui sopra:

  • Ho dichiarato una variabile chiamata coding e le ho assegnato la stringa I learned how to code from TV
  • Ho dichiarato un'altra variabile chiamata replacedString
  • Per il valore della variabile replacedString, ho inserito il metodo replace() e specificato che, nella variabile iniziale, voglio sostituire TV con freeCodeCamp.

Qui sotto c'è un esempio che mostra che la stringa iniziale non viene mai cambiata dal metodo replace():

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp
console.log(coding); // Result: I learned how to code from TV

Nel prossimo esempio, utilizziamo un'espressione regolare per cercare  il testo corrispondente a “TV” e sostituirlo con “freeCodeCamp”:

const coding = "I learned how to code from TV";
const replacedString = coding.replace(/TV/, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

Dato che il metodo replace() funziona soltanto per la prima volta che il testo viene incontrato in una stringa, cosa fare se desideri sostituire tutte le corrispondenze con una parola in una stringa? Per questo, puoi usare il metodo replaceAll().

Come usare il metodo replaceAll()

Il metodo replaceAll() è leggermente diverso dal metodo replace().

Questo metodo sostituisce una parola ogni volta che appare all'interno di una stringa.

Esempio del metodo replaceAll()

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replaceAll("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

Tutte le volte in cui la parola "TV" è apparsa nella stringa, è stata sostituita con “freeCodeCamp” grazie al metodo replaceAll().

Usando il metodo originale replace(), puoi ottenere ciò che fa replaceAll() grazie a un'espressione regolare che ricerca una determinata parola, tutte le volte che è presente in una stringa, e la sostituisce con un'altra parola.

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replace(/TV/g, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

Ho cercato tutte le corrispondenze con la parola “TV” per sostituirle con "freeCodeCamp", aggiungendo il flag g all'espressione regolare.

Come passare una funzione al metodo replace()

Come detto precedentemente, puoi esprimere il valore sostituito da restituire come una funzione.

Nell'esempio qui sotto, ho convertito il titolo di quest'articolo in uno slug URL con il metodo replace:

const articleTitle = "JavaScript Replace – How to Use the String.prototype.replace() Method";
const slugifyArticleTitle = articleTitle.toLowerCase().replace(/ /g, function (article) {
    return article.split(" ").join("-");
  });

console.log(slugifyArticleTitle); //Result: javascript-replace-–-how-to-use-the-string.prototype.replace()-method

Nello script qui sopra:

  • Ho dichiarato una variabile chiamata articleTitle e le ho assegnato il titolo dell'articolo
  • Ho dichiarato un'altra variabile chiamata slugifyArticleTitle e convertito il titolo dell'articolo in lettere minuscole con il metodo toLowerCase()
  • Ho usato il metodo replace() cercando tutti gli spazi bianchi con / /g
  • Ho passato al metodo replace() una funzione contenente il parametro article. Questo parametro fa riferimento alla stringa (titolo dell'articolo) convertita in minuscolo
  • All'interno della funzione, ho usato il metodo split() per separare il titolo dell'articolo in corrispondenza di ogni spazio bianco
  • Dopo aver diviso il titolo dell'articolo dove c'erano gli spazi, ho usato il metodo join() per unire le singole parole della stringa con un trattino

Conclusione

Il metodo String.prototype.replace() è uno strumento molto utile con cui puoi svolgere un sacco di operazioni lavorando sulle stringhe in JavaScript.

Oltre al metodo String.prototype.replace(), abbiamo visto come usare il metodo String.prototype.replaceAll().

Dovresti fare attenzione con quest'ultimo, perché non è ancora supportato da alcuni browser. Invece di usare replaceAll(), abbiamo anche visto come ottenere lo stesso risultato con un'espressione regolare per cercare tutti i valori in una specifica stringa.

Grazie per aver letto quest'articolo, se lo hai trovato utile, condividilo con i tuoi amici!