JScript Katana

Padroneggiare replace() di JavaScript: Guida completa con regex, callback e best

Operazioni sulle stringhe
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduzione

JavaScript è uno dei linguaggi di programmazione più diffusi nello sviluppo web. In particolare, la manipolazione delle stringhe è un compito comune quando si gestiscono input dell’utente o si elaborano dati. Tra questi, il metodo replace() è noto come uno strumento potente che rende la sostituzione delle stringhe semplice ed efficiente.
In questo articolo spiegheremo in dettaglio il metodo replace() di JavaScript, dalle basi alle tecniche avanzate. Copriremo non solo l’uso di base ma anche sostituzioni avanzate usando le espressioni regolari e esempi pratici, rendend utile sia per i principianti sia per gli sviluppatori di livello intermedio.

2. Nozioni di base del metodo replace()

Cos’è il metodo replace()?

Il metodo replace() è una funzione integrata di JavaScript usata per sostituire parti specifiche di una stringa con un’altra stringa. Con questo metodo è possibile modificare o trasformare i dati delle modo efficiente.

Sintassi

string.replace(pattern, replacement)
  • pattern : La stringa o l’espressione regolare da cercare.
  • replacement : La stringa con cui sostituire, o una funzione di callback.

Uso di base

Il seguente esempio dimostra una semplice sostituzione di stringa:

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

In questo codice, la stringa “world” viene sostituita con “JavaScript.”

Note

  1. replace() sostituisce solo la prima occorrenza.
  2. Se vuoi sostituire tutte le occorrenze, devi usare un’espressione regolare con il flag g.

3. Sostituzione avanzata con le espressioni regolari

Cos’è un’espressione regolare?

Le espressioni regolari sono strumenti potenti usati per rappresentare modelli di stringhe. In JavaScript, puoi usare le regex per eseguire facilmente ricerche e sostituzioni complesse.

Esempio: Sostituzione con le espressioni regolari

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Tip di flag

  • g : Sostituzione globale (sostituisce tutte le occorrenze)
  • i : Sostituzione senza distinzione tra maiuscole e minuscole
  • m : Modalità multilinea

Esempio: Sostituzione senza distinzione tra maiuscole e minuscole

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Sostituire più occorrenze

Sostituire tutte le occorrenze

Per sostituire tutte le occorrenze corrispondenti, usa il flag g nella tua regex.

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Tecnica: Sostituire più stringhe diverse contemporaneamente

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

Questo approccio ti consente di sostituire più modelli contemporaneamente, migliorando la leggibilità del codice.

5. Sostituzione dinamica con funzioni di callback

Cos’è una funzione di callback?

Una funzione di callback viene invocata durante il processo di sostituzione e può utilizzare le informazioni della corrispondenza per personalizzare il risultato.

Esempi di sostituzione dinamica

1. Scambiare l’ordine della stringa

let text = "Tanaka, Taro";
let result = text.replace(/(w+), (w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Convertire il formato della data

let date = "2024-12-25";
let formattedDate = date.replace(/(d{4})-(d{2})-(d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Gestire caratteri speciali e sequenze di escape

Cosa sono i caratteri speciali?

Nelle espressioni regolari, alcuni caratteri sono considerati metacaratteri con significati speciali. Per usarli letteralmente nelle ricerche o nelle sostituzioni, è necessario eseguirne l’escape con le sequenze di escape.

Sostituzione di Stringhe Contenenti Caratteri Speciali

Esempio 1: Sostituire una Stringa Contenente un Punto

let text = "www.example.com";
let result = text.replace(/./g, "-");
console.log(result); // "www-example-com"

Esempio 2: Rimuovere il Simbolo del Dollaro

let price = "$1,000";
let result = price.replace(/$/g, "");
console.log(result); // "1,000"

Sostituzione di Caratteri di Escape HTML

Esempio: Escape dei Tag HTML

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Esempi Pratici e Tecniche Avanzate

Convertire le Interruzioni di Linea in Tag
Tags

let text = "HellonWorldnJavaScript";
let result = text.replace(/n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

Manipolazione dei Parametri URL

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Sanitizzazione dell’Input Utente

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Note e Buone Pratiche

Solo la Prima Corrispondenza Viene Sostituita

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Prestare Attenzione alla Sensibilità al Maiuscolo/Minuscolo

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Evitare Escape Mancanti per i Caratteri Speciali

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[]]/g, "$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Conclusione

Riepilogo dell’Articolo

  • Uso Base: Spiegata la sintassi e gli esempi di sostituzione semplici del metodo replace().
  • Applicazioni delle Regex: Imparato come usare le espressioni regolari e i flag per sostituzioni avanzate.
  • Funzioni di Callback: Trattato come eseguire sostituzioni dinamiche con esempi pratici.
  • Esempi Pratici: Introdotte tecniche utili in applicazioni reali come la manipolazione degli URL e la sanitizzazione.
  • Buone Pratiche: Spiegate note e considerazioni sulle prestazioni in dettaglio.

Considerazioni Finali

Il metodo replace() di JavaScript è uno strumento versatile che può essere applicato da scenari di base a quelli avanzati. Continueremo a fornire informazioni utili su JavaScript, quindi restate sintonizzati!

広告