jQuery: search and replace utilizzando gli array

Gli array JavaScript possono fare davvero molto. Nel suo libro DHTML Cookbook (O'Reilly), Danny Goodman ha dimostrato come si possano ottenere risultati molto interessanti con gli array. In questo articolo vedremo come utilizzare questo oggetto per implementare una funzione di search and replace con jQuery.

Immaginiamo di avere due liste HTML, ciascuna con 26 voci. La prima ripete la stessa lettera in tutte le voci, mentre la seconda dovrebbe mostrare la progressione alfabetica completa.

Quello che dobbiamo fare è:

1. Creare un array con le 26 lettere dell'alfabeto.
2. Eseguire un ciclo .each() sulle voci di lista e usare l'indice di iterazione del ciclo per accedere all'array di lettere e sostituire il testo delle voci.

Ecco il codice:

var searchAndReplace = function() {
    var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',
                                   'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
                                   'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    var items = $('li', '#test');

    items.each(function(i) {
        $(this).text(letters[i].toUpperCase());
    });

};

searchAndReplace();​

// Provides: You should eat pizza, beer, and ice cream every day

$phrase  = "You should eat fruits, vegetables, and fiber every day.";
$healthy = array("fruits", "vegetables", "fiber");
$yummy   = array("pizza", "beer", "ice cream");

$newphrase = str_replace($healthy, $yummy, $phrase);

Potete visionare l'esempio finale in questa pagina.