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 stringaI learned how to code from TV
- Ho dichiarato un'altra variabile chiamata
replacedString
- Per il valore della variabile
replacedString
, ho inserito il metodoreplace()
e specificato che, nella variabile iniziale, voglio sostituireTV
confreeCodeCamp
.
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 metodotoLowerCase()
- Ho usato il metodo
replace()
cercando tutti gli spazi bianchi con/ /g
- Ho passato al metodo
replace()
una funzione contenente il parametroarticle
. 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!