JavaScript: ricerca e sostituzione avanzata nelle stringhe

by Anastasia P.
Add as preferred source on Google
SHARE
JavaScript: ricerca e sostituzione avanzata nelle stringhe
© Guida-HTML5.it

Introduzione

La manipolazione delle stringhe non consiste soltanto nell’estrarre una parte di testo o nel concatenare più valori. In molti programmi è necessario cercare parole, verificare se una stringa rispetta una determinata struttura e sostituire automaticamente alcune informazioni. Queste operazioni sono comuni nei motori di ricerca, nei sistemi di filtraggio, nei messaggi dinamici e nei programmi che elaborano contenuti testuali.

In questo tutorial realizzeremo un piccolo analizzatore di messaggi. Il programma cercherà parole chiave all’interno di un testo, ignorerà la differenza tra maiuscole e minuscole, verificherà la presenza di determinati prefissi e sostituirà alcune parole con un formato evidenziato.

L’obiettivo è imparare a usare in modo pratico i metodi includes(), indexOf(), startsWith(), endsWith() e replaceAll().

Codice completo

const messaggio =
  "Attenzione: il server risponde lentamente. " +
  "Contatta il supporto tecnico per ricevere assistenza.";

// Converte il testo in minuscolo per rendere le ricerche non sensibili
// alle differenze tra lettere maiuscole e minuscole.
const testoNormalizzato = messaggio.toLowerCase();

// Parole che vogliamo individuare nel messaggio.
const paroleChiave = ["server", "supporto", "assistenza"];

// Cerca le parole chiave con includes().
const paroleTrovate = paroleChiave.filter((parola) => {
  return testoNormalizzato.includes(parola);
});

console.log("Parole trovate:", paroleTrovate);

// Verifica la posizione della prima occorrenza di "server".
const posizioneServer = testoNormalizzato.indexOf("server");

if (posizioneServer !== -1) {
  console.log("La parola server inizia dalla posizione:", posizioneServer);
}

// Controlla come inizia e come termina il messaggio.
const iniziaConAttenzione = testoNormalizzato.startsWith("attenzione");
const terminaConPunto = messaggio.endsWith(".");

console.log("Inizia con Attenzione:", iniziaConAttenzione);
console.log("Termina con un punto:", terminaConPunto);

// Sostituisce tutte le occorrenze di alcune parole.
const messaggioEvidenziato = messaggio
  .replaceAll("server", "<strong>server</strong>")
  .replaceAll("supporto", "<strong>supporto</strong>")
  .replaceAll("assistenza", "<strong>assistenza</strong>");

console.log(messaggioEvidenziato);

// Funzione riutilizzabile per cercare parole in un testo.
function analizzaTesto(testo, termini) {
  const testoMinuscolo = testo.toLowerCase();

  return termini.map((termine) => {
    const termineMinuscolo = termine.toLowerCase();

    return {
      termine,
      presente: testoMinuscolo.includes(termineMinuscolo),
      posizione: testoMinuscolo.indexOf(termineMinuscolo)
    };
  });
}

const risultato = analizzaTesto(messaggio, ["server", "cliente", "tecnico"]);

console.table(risultato);

Spiegazione

Ricerca con includes()

Il metodo includes() verifica se una stringa contiene una determinata sequenza di caratteri. Restituisce un valore booleano: true se il testo è presente, altrimenti false.

const titolo = "Guida JavaScript";

console.log(titolo.includes("JavaScript")); // true
console.log(titolo.includes("Python"));     // false

La ricerca è sensibile alle maiuscole e alle minuscole. Per questo, quando il confronto non deve distinguere tra maiuscole e minuscole, è utile trasformare entrambi i valori in minuscolo con toLowerCase().

const testo = "Errore di Connessione";
const parola = "errore";

const trovato = testo.toLowerCase().includes(parola.toLowerCase());

console.log(trovato); // true

Individuare la posizione con indexOf()

indexOf() restituisce l’indice della prima occorrenza di una sottostringa. Gli indici delle stringhe JavaScript partono da zero. Se la sequenza non viene trovata, il metodo restituisce -1.

const codice = "ID-2026-CLIENTE";

console.log(codice.indexOf("2026"));   // 3
console.log(codice.indexOf("ADMIN"));  // -1

Controllare esplicitamente il valore -1 è importante. Una condizione come if (posizione) potrebbe comportarsi in modo errato quando la parola si trova all’indice zero, perché zero è un valore considerato falsy in JavaScript.

Controllare l’inizio e la fine del testo

startsWith() verifica se una stringa comincia con un determinato valore, mentre endsWith() controlla se termina con quel valore.

const file = "report-final.pdf";
const comando = "DELETE FROM utenti";

console.log(file.endsWith(".pdf"));       // true
console.log(comando.startsWith("DELETE")); // true

Questi metodi sono utili, ad esempio, per riconoscere estensioni di file, prefissi di codici, comandi o categorie di messaggi. È possibile specificare anche una posizione iniziale per startsWith(), ma nella maggior parte dei casi il controllo parte dall’inizio della stringa.

Sostituire contenuti con replaceAll()

Il metodo replaceAll() sostituisce tutte le occorrenze di un testo. A differenza di replace(), che normalmente sostituisce soltanto la prima occorrenza quando riceve una stringa semplice, replaceAll() opera sull’intero contenuto.

const frase = "rosso, verde, rosso";

const nuovaFrase = frase.replaceAll("rosso", "blu");

console.log(nuovaFrase); // "blu, verde, blu"

Le stringhe JavaScript sono immutabili: i metodi di manipolazione non modificano direttamente il valore originale, ma restituiscono una nuova stringa. Per conservare il risultato bisogna quindi assegnarlo a una variabile.

Best practice

  • Normalizza prima di confrontare: usa toLowerCase() o toUpperCase() quando il confronto non deve distinguere tra maiuscole e minuscole.
  • Usa includes() per la presenza: è più leggibile rispetto a confrontare manualmente il risultato di indexOf() con zero.
  • Usa indexOf() quando serve la posizione: è adatto quando devi mostrare dove compare una parola oppure estrarre informazioni successive.
  • Controlla i valori restituiti: ricorda che indexOf() restituisce -1 se non trova nulla.
  • Evita trasformazioni ripetute: se devi eseguire molte ricerche, normalizza il testo una sola volta e riutilizza il risultato.
  • Fai attenzione all’HTML: inserire direttamente il risultato di replaceAll() in innerHTML può essere pericoloso se il testo proviene dall’utente. In applicazioni reali è necessario filtrare o sanificare i dati.
  • Preferisci funzioni riutilizzabili: incapsulare la logica in una funzione rende il codice più facile da testare e mantenere.
  • Considera gli accenti: toLowerCase() non risolve automaticamente tutti i problemi di confronto tra alfabeti e lingue diverse. Per casi internazionali può essere utile valutare localeCompare() o Intl.Collator.

Riepilogo

La ricerca e la sostituzione sono operazioni fondamentali nella gestione delle stringhe JavaScript. includes() permette di verificare rapidamente la presenza di un testo, indexOf() restituisce la posizione di una corrispondenza, mentre startsWith() ed endsWith() controllano rispettivamente l’inizio e la fine di una stringa.

Con replaceAll() puoi applicare una sostituzione globale senza scrivere cicli manuali. Combinando questi metodi con la normalizzazione tramite toLowerCase() è possibile costruire filtri e analizzatori semplici, leggibili e riutilizzabili.

Il passaggio successivo consiste nell’integrare queste tecniche con espressioni regolari, funzioni di callback e strumenti di internazionalizzazione, mantenendo sempre attenzione alla sicurezza quando il testo viene inserito nell’interfaccia utente.

Approfondisci con risorse ufficiali

  • MDN - String: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/String
  • MDN - includes(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
  • MDN - indexOf(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
  • MDN - replaceAll(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
  • ECMAScript Language Specification: https://tc39.es/ecma262/

Add as preferred source on Google
SHARE