jQuery Split (explode): dividere stringhe ed elementi in array

Oggi vediamo la funzione Split, di fatto “gemella” di explode (php) applicata però ai nostri script jQuery e adatta ad dividere elementi e stringhe in array.

Descrizione del problema

Split è di fatto la versione clone di explode per javascript/jQuery. Se non sapete nulla di questa funzione vi invito a visionare questo articolo “panoramico” molto utile.

[button link=”http://www.targetweb.it/php-gestire-le-stringhe/” color=”blue” target=”blank” size=”large”]Funzione explode PHP[/button]

Pensiamo di voler “estrarre” le parole da questa frase:

var stringa = 'Viva Targetweb';

Risoluzione del problema

Per estrarre “Viva” e “Targetweb” dobbiamo splittare la stringa in modo da ottenere due array:

• array[0] –> “Viva”
• array[1] –> “Targetweb”

Per farlo usiamo proprio split in questo modo molto semplice:

var dati_stringa = stringa.split(' ');// usa come separatore lo spazio tra una parola e l'altra

Per visualizzare in un alert  solo la parola “Targetweb” a questo punto vi basterà usare questo codice:

alert(dati_stringa[1]); //Metto nell'alert il secondo array (nota la numerazione parte da 0 ovviamente)

E se al posto dello spazio avessi una virgola o un altro tipo di separatore? Bhè come avrete già intuito il codice va cambiato il questo modo:

var stringa = 'Viva,Targetweb';

var dati_stringa = stringa.split(',');//separa la stringa usando come separatore la virgola

Possibili applicazioni reali

Fino ad ora abbiamo visto delle applicazioni poco “reali” e molto teoriche delle potenzialità di split, vediamo ora qualche esempio più concreto. Personalmente ho usato split di recente per individuare all’interno del mio CMS in quale sezione (area) si trovasse l’utente: aggiunta, opzioni, visualizzazione. Una volta scoperto in che area si trova l’utente ho usato split per tenere “aperto” il sottomenù di sezione per evitare di doverlo aprire ogni volta e rendere la navigazione più rapida.

Per individuare l’area in cui si trova l’utente viene usata la funzione illustrata ieri, se non hai letto l’articolo ti invito a farlo cliccando qui.

 Step 1: Individuare il percorso della pagina e relativa “area”

var pathname = window.location.pathname;

Step 2: Filtrare il path e ottenere l’area in cui si trova l’utente, nel mio caso le possibilità possibili sono:

•  aggiungi.php –> l’utente vuole aggiungere qualcosa devo tenere aperto il relativo submenu dropdown di interesse.
•  lista.php –> l’utente vuole vedere qualcosa devo tenere aperto il relativo submenu dropdown di interesse.
• opzioni.php –> l’utente vuole modificare le opzioni e devo tenere aperto il relativo submenu dropdown di interesse.

Nel mio caso avendo il pannello cms in una subdirectory “l’area” di interesse sarà al terzo livello dell’array filtrato. Ecco il codice:

var myArray = pathname.split('/');

var tab_aperto = myArray[3]; // recupero terza parte del pattern

Step 3: A questo punto uso dei semplici cicli if per tenere aperto il dropdown di interesse.

 if (tab_aperto == "lista.php"){ 

      $(".open_lista").next().toggle(); //next nel mio caso seleziona il menu ul

 } else if(tab_aperto == "aggiungi.php"){

      $(".open_aggiunta").next().toggle();

 } else if(tab_aperto == "opzioni.php"){

      $(".open_opzioni").next().toggle();

 } else {}

Codice completo

    var pathname = window.location.pathname;

    var myArray = pathname.split('/');

    var tab_aperto = myArray[3]; // recupero terza parte del pattern

    if (tab_aperto == "lista.php"){ 

        $(".open_lista").next().toggle();

     } else if(tab_aperto == "aggiungi.php"){

  	 $(".open_aggiunta").next().toggle();

      } else if(tab_aperto == "opzioni.php"){

  	 $(".open_opzioni").next().toggle();

      } else {}

Conclusioni

Come abbiamo visto jQuery split è una funzione molto utile in svariati casi, vi consiglio di studiarla attentamente. Ti è piaciuto questo articolo? Segui la nostra sezione jQuery un vero punto di riferimento italiano su questo linguaggio!