Gestione delle stringhe in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Le stringhe in Javascript sono delle variabili di tipo alfanumerico (solo caratteri alfabetici, solo numerici o entrambi i tipi) definibili sia staticamente (sotto forma di costanti, es var miaStringa = "Testo della stringa";) oppure dinamicamente, ad esempio reperendo il valore di una casella di testo.

Il loro utilizzo è semplice ed immediato:

<script language="javascript">
 <!--
  var miaStringa = "io sono una stringa!";
      document.write("Ciao, " + miaStringa);
 //-->
</script>
Esempi del genere sono capitati spesso nel corso del manuale e dei tutorial di questo sito e sono all'ordine di ogni programma Javascript che deve restituire qualcosa in output: in questa lezione non ci occuperemo della definizione di testi o variabili da restituire in stampa sulla pagina o in un alert(), ma vedremo come effettuare dei controlli che ci consentano la loro manipolazione.

Occupiamoci adesso di definire tutte le proprietà ed i metodi utili per la manipolazione delle stringhe, passeremo poi in analisi in maniera più dettagliata quelli che ci torneranno più utili nelle più comuni applicazioni Javascript.

Proprietà

Esiste una sola proprietà utile par la manipolazione delle stringhe, si tratta di length che, come la sua traduzione dall'inglese lascia ad intendere, calcola la lunghezza della stringa, nello specifico il numero di caratteri che la compone:
<script language="javascript">
 <!--
  var miaStringa = "lukeonweb";
      document.write("La stringa è composta da " + miaStringa.length + " caratteri.");
 //-->
<script>
Il suo impiego torna utile, ad esempio, per calcolare il numero di caratteri presenti in una textarea con un controllo del tipo:
<script language="javascript">
 <!--
  function Conta() {
     var conta = document.modulo.conta.value.length;
         alert(conta);
  }
 //-->
</script>

<form name="modulo">
   <textarea name="conta" rows="5" cols="30"></textarea><br>
   <input type="button" value="Conta" onClick="Conta()">
</form>
Metodi

I metodi utili per la manipolazione delle stringhe sono ben 26, li esamineremo tutti, facendo particolare attenzione, come già detto, a quelli più utili nell'ambito di un'applicazione Javascript.

Tutti i metodi delle stringhe seguono la forma sintattica variabile.metodo(), non riporterò esempi per tutti i metodi, essendo la maggior parte inutili nella maggior parte delle occasioni e comunque seguono, come detto, sempre lo stesso costrutto.

Iniziamo in ordine alfabetico:

anchor() - assegna ad una stringa un ancora Html del tipo <a name="#top"> per riportare l'utente all'inizio della pagina

big() - stampa a video un carattere di dimensioni maggiori di quello stabilito, come ad esempio <big>esempio</big>

blink() - crea l'effetto testo lampeggiante valido solo per Netscape, equivalente a <blink>esempio</blink>

bold() - che dire... grassetto! <b>esempio</b> :-)

chartAt()

Questo è il primo metodo che gode di particolare importanza, può essere utilizzato sia per effettuare controlli sui campi di un modulo, sia per una semplice manipolazione di una stringa, ad esempio:
var miaStringa = "lukeonweb";
document.write(miaStringa.charAt(0));
stampa a video la lettera elle (l), dato che con questo metodo il conteggio inizia da zero (0):
l u k e o n w e b
0 1 2 3 4 5 6 7 8
Possiamo, grazie a questo metodo, assicurarci che la stringa immessa in una casella di testo non inizi mai con uno spazio vuoto:
var miaStringa = document.modulo.textbox.value;
if (miaStringa.charAt(0) == " ") alert("Elimina lo spazio prima della stringa.");
concat() - equivale all'operatore + per concatenare due variabili di tipo string.

fixed() - equivale al carattere monospazio Html definibili con i Tag <tt> e </tt>, ovvero col font Courier New

fontcolor() - imposta il colore del testo di una stringa

fontsize() - imposta le dimensioni del testo di una stringa

indexOf()

Questo è il secondo metodo che gode di particolare importanza nella manipolazione delle stringhe, può essere utile a ricercare un carattere all'interno di una stringa, oppure a verificare che il carattere specificato sia presente:
var miaStringa = "lukeonweb"; // Definisce la stringa
document.write(miaStringa); // Stampa a video la stringa
var trova = miaStringa.indexOf("k"); // Ricerca un carattere nella stringa
if (trova) alert("Il carattere è presente"); // Se il carattere ricercato è presente lancia un messaggio positivo
else alert("Il carattere non è presente"); // Altrimenti ne lancia uno negativo
La lettera k utilizzata nell'esempio (riga # 3) fa effettivamente parte della stringa, quindi il messaggio che riceveremo sarà positivo.

Come già detto questo metodo ci torna utile per effettuare dei controlli su di un campo, supponiamo di volerci assicurarare che in una stringa derivante da una variabile di una casella di testo sia presente il carattere a, questo è il codice:
<script language="javascript">
 <!--
  function Controlla() {
     var controlla = document.modulo.testo.value;
         if (controlla.indexOf("a") != (-1)) alert("OK");
         else alert("NON E' OK");
  }
 //-->
</script>

<form name="modulo">
   <input type="text" name="testo">
   <input type="button" value="Controlla" onClick="Controlla()">
</form>
italics() - imposta la stringa in corsivo

lastIndexOf()

Questo metodo effettua una ricerca di un carattere di una stringa partendo dall'ultimo carattere o da quello specificato dopo la virgola:
var miaStringa = "lukeonweb"; // Inizializza la stringa
miaStringa.lastIndexOf("k"); // Inizia dall'ultimo carattere
miaStringa.lastIndexOf("k", 7); // Inizia dall'ottavo carattere (da 7 a 0)
link() - aggiunge un link di tipo <a herf="index.htm"> ad una stringa

match() - questo metodo è utile per la manipolazione delle stringhe nelle espressioni regolari

replace()

Altro metodo importante, soprattutto nell'ambito di applicazioni server-side, se ad esempio utilizzassimo JScipt per scrivere in Asp, ci tornerà utile un'espressione tipo:
var miaStringa = new String(Request.Form("miaStringa"));
var miaStringaReplace = miaStringa.replace(/'/g,"''");
L'espressione /'/g,"''" permette di inviare una stringa sostituendo un singolo apice (che confonderebbe un database) con una coppia di singoli apici, ma questo è comunque Asp!

Il senso è comunque chiaro, replace() permette di sostituire una stringa con un'altra, è molto utilizzato anche nelle chat di un certo livello, dove scrivendo una parolaccia appare, ad esempio, un sinonimo non offensivo, ma facciamo un esempio cercando di non essere volgari :-) Scrivendo nella casella di testo la lettera a ci verrà restituita la lettera b:
<script language="javascript">
 <!--
  function Converti() {
     var converti = document.modulo.testo.value;
     var converti2 = converti.replace("a","b");
         stampa.innerHTML = converti2;
  }
 //-->
</script>

<form name="modulo">
   <input type="text" name="testo">
   <input type="button" value="Converti" onClick="Converti()">
</form>

<div id="stampa"></div>
search() - questo metodo è utile per la manipolazione delle stringhe nelle espressioni regolari

slice()

Questo metodo permette di estrarre caratteri da una stringa iniziando da un punto stabilito e finendo in un secondo punto stabilito, ricordando sempre che il conteggio inizia da zero (0):
var miaStringa = "lukeonweb";
document.write(miaStringa.slice(4,6)); // Verrà visualizzato " on "
small() - come per big() verrà visualizzato un carattere più piccolo di quello di default come in Html con <small> e </small>

split()

Questo metodo consente di dividere una stringa in un "Array() di stringa", vediamo un esempio:
var miaStringa = "Questa stringa sarà divisa in un Array() di stringa da uno spazio vuoto!";
document.write(miaStringa.split(" "));
stamperà il testo contenuto nella stringa dividendo le singole parole con una virgola.

strike() - verrà visualizzato un testo sbarrato come in Html con <strike>esempio</strike>

sub() - visualizza la stringa in "pedice" come in Html con <sub>esempio</sub>

substr()

Altro metodo estremamente utile ed importante nella manipolazione delle stringhe, consente di controllare i caratteri presenti in una stringa, non riporto un esempio.

substring()

Questo metodo permette di creare una reale sottostringa, eliminando o aggiungendo caratteri ad una stringa specificandone le posizioni:
var miaStringa = "lukeonweb";
document.write(miaStringa.substring(1,4));
sup() - visualizza la stringa in "apice" come in Html con <sup>esempio</sup>

toLowerCase() - Stampa una stringa sempre in minuscolo: LukeOnWEB = lukeonweb

toUpperCase() - Stampa una stringa sempre in maiuscolo: LukeOnWEB = LUKEONWEB

Siamo arrivati alla fine di questa lezione che subirà modifiche e aggiornamenti in funzione di qualsiasi vostro suggerimento o dubbio, consiglio intanto di esercitarsi a manipolare le stringhe sfruttando le nozioni teoriche e pratiche apprese nel corso di questa lezione, e ne risottolineo l'importanza.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.930)

:: Breve guida a jQuery (98.633)

:: Le espressioni regolari in Javascript (84.992)

:: Stampare una pagina col Dhtml (42.852)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.670)

:: Menu orizzontale dinamico in Dhtml (37.191)

:: Gli Array in Javascript (35.938)

:: Temporizzazioni Javascript (31.634)

:: Istruzion condizionali in Javascript: if e switch (28.947)

:: DOM: rendere cross-browser il comando innerHTML (28.106)

IN EVIDENZA
DOWNLOAD