JavaScript offre agli sviluppatori un potente mezzo di controllo e manipolazione delle stringhe mediante una serie di proprietà e metodi; in questo articolo ne esamineremo i principali e vedremo una serie di semplici ed utili esempi.
Le stringhe sono in genere delle variabili che contengono dati "alfanumerici" (solo caratteri alfabetici, solo numerici o di entrambi i tipi), sono definibili sia staticamente (ovvero sotto forma di costanti, es var miaStringa = "Testo della stringa";) oppure dinamicamente, ad esempio reperendo il valore di una casella di testo o da un qualsiasi elemento di input.
Il loro utilizzo è semplice ed immediato:
var miaStringa = "io sono una stringa!";
document.write("Ciao, " + miaStringa);In questo esempio colleghiamo con l'operatore "+" (più) due stringhe e aggiungiamo il contenuto al documento HTML.
Nell'articolo esamineremo non solo proprietà e metodi degli oggetti stringa, ma anche alcuni casi pratici di controllo che è possibile effettuare sulle stringhe, per ottenere un output il più possibile privo di errori una precisione maggiore nella manipolazione dei dati.
Iniziamo con le proprietà e 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, contiene la lunghezza della stringa, ovvero il numero di caratteri di cui è composta.
Ecco un esempio di utilizzo di questa proprietà:
var miaStringa = "lukeonweb";
document.write("La stringa è composta da " + miaStringa.length + " caratteri.");Il suo impiego torna utile, ad esempio, per calcolare il numero di caratteri presenti in una textarea con un controllo del tipo:
<script>
function ContaCaratteri()
{
var conta = document.modulo.conta.value.length;
window.alert(conta);
}
</script>
<form name="modulo">
<textarea name="conta" rows="10" cols="30"></textarea><br />
<input type="button" value="Conta" onClick="ContaCaratteri()" />
</form>Passiamo ora in rassegna i metodi dell'oggetto String.
Metodi
I metodi utili per la manipolazione delle stringhe sono molti e li esamineremo quasi tutti, facendo particolare attenzione, come già detto, a quelli più utili nell'ambito di una comune applicazione JavaScript.
Tutti i metodi delle stringhe seguono la forma sintattica variabile.metodo(); non riporterò esempi per tutti i metodi, essendo per la maggior parte di scarso utilizzo nella stragrande maggioranza delle occasioni, e comunque seguono, come detto, sempre lo stesso costrutto sintattico.
charAt
chartAt() è un metodo che gode di particolare importanza, ci permette di ottenere l'ennesimo carattere della stringa e può essere utilizzato ad esempio per effettuare controlli sui campi di un form. Ecco la sintassi:
str.charAt(index)Vediamo un primo caso:
var miaStringa = "lukeonweb";
document.write(miaStringa.charAt(0));stampa a video la lettera elle (l) poiché 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 8Grazie a charAt possiamo 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) == " ")
{
window.alert("Elimina lo spazio prima della stringa.");
}concat
concat() - equivale all'operatore + per concatenare due variabili di tipo string. Ecco la sintassi:
str.concat(string2, string3[, ..., stringN])indexOf
indexOf() gode di particolare importanza nella manipolazione delle stringhe. Ritorna la posizione di un certo carattere, se prensente nella stringa. La sua sintassi è questa:
str.indexOf(searchValue[, fromIndex])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)
{
window.alert("Il carattere è presente"); // trovato
}
else
{
window.alert("Il carattere non è presente"); // non trovato
}La lettera "k" utilizzata nell'esempio fa effettivamente parte della stringa, quindi il messaggio che riceveremo sarà di esito positivo.
Come già detto, questo metodo torna particolarmente utile per effettuare 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", in questo caso potremmo implementare qualcosa di simile a:
<script>
function ControllaPresenza()
{
var controlla = document.modulo.testo.value;
if (controlla.indexOf("a") != (-1)) {
window.alert("OK");
} else {
window.alert("NON È OK");
}
}
</script>
<form name="modulo">
<input type="text" name="testo">
<input type="button" value="Controlla" onClick="ControllaPresenza()">
</form>lastIndexOf
lastIndexOf() effettua una ricerca di un carattere di una stringa partendo dall'ultimo carattere o da quello specificato dopo la virgola, ecco la sintassi:
str.lastIndexOf(searchValue[, fromIndex])Ed ecco un esempio:
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)Dopo questa prima carrellata, esaminiamo alcuni metodi molto utili per effettuare ricerche avanzate nel testo.
Metodi per il parsing e la ricerca avanzata nel testo
Vediamo alcuni dei metodi utili per la ricerca all'interno dei testi e per il parsing di stringhe particolari.
replace
replace() è un metodo molto importante, soprattutto quando abbiamo a che fare con testi ed espressioni regolari. Ecco la sintassi:
str.replace(regexp|substr, newSubStr);Ed un primo esempio:
var miaStringa = new String("miaStringa");
var miaStringaReplace = miaStringa.replace(/'/g, "''");
document.write(miaStringaReplace);L'oggetto /'/g è una espressione regolare che permette di inviare una stringa sostituendo un singolo apice (che confonderebbe ad esempio una stringa SQL per un database) con una coppia di singoli apici ("''"), in modo da far tornare pari il conto degli apici.
>> Leggi di più sulle espressioni regolari in JavaScript
Il senso è comunque chiaro: il metodo 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... Facciamo un esempio cercando di non essere volgari :-)
Scrivendo nella casella di testo la lettera a ci sarà restituita la lettera b:
<script>
function ConvertiCarattere() {
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="ConvertiCarattere()">
</form>
<div id="stampa"></div>Anche i metodi search() e match() sono metodi molto utili per la manipolazione delle stringhe nelle espressioni regolari
slice
slice() 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):
str.slice(beginSlice[, endSlice])L'esempio:
var miaStringa = "lukeonweb";
document.write(miaStringa.slice(4,6)); // sarà visualizzato "on"split
split() consente di dividere una stringa in un array di stringhe, grazie ad un delimitatore:
str.split([separator][, limit])Vediamo un esempio:
var miaStringa = "Questa stringa sarà divisa in un Array() di stringa da uno spazio vuoto!";
document.write(miaStringa.split(" "));stamperà l'array generato dalle parole della stringa.
substr
substr() è un metodo estremamente utile ed importante nella manipolazione delle stringhe, consente di controllare i caratteri presenti in una stringa partendo dall'inizio, ovvero dal carattere zero (0). Sintassi:
str.substr(start[, length])Ecco un esempio:
var miaStringa = "Luca Ruggiero";
document.write(miaStringa.substr(5));stamperà a video Ruggiero, eliminando i caratteri Luca più lo spazio vuoto in mezzo alle due parole.
substring
substring() permette di creare una reale sottostringa, eliminando o aggiungendo caratteri ad una stringa specificandone le posizioni:
str.substring(indexA[, indexB])L'esempio:
var miaStringa = "lukeonweb";
document.write(miaStringa.substring(1,4));Metodi poco utilizzati (legati al DOM)
link
link(), non è un metodo molto utilizzato, soprattutto per il suo stretto legame con l'HTML. Serve ad aggiungere un link di tipo <a href="index.html"> ad una stringa. Ecco la sintassi:
str.link(url)Ed un esempio:
<script>
var miaStringa = "HTML.it ...tutto per gli sviluppatori";
document.write(miaStringa.link("http://www.html.it"));
</script>con il quale otteniamo il seguente effetto:
.
toLowerCase
toLowerCase() stampa una stringa sempre in minuscolo: LukeOnWeb = lukeonweb:
var miaStringa = "LukeOnWeb";
document.write(miaStringa.toLowerCase());toUpperCase
toUpperCase() stampa una stringa sempre in maiuscolo: LukeOnWeb = LUKEONWEB:
var miaStringa = "LukeOnWeb";
document.write(miaStringa.toUpperCase());Metodi deprecati
Molti dei metodi deprecati nelle versioni più recenti di JavaScript, sono stati aboliti in conseguenza all'abolizione di alcuni tag HTML (dopo l'avvento di HTML5) o per dare una più netta distinzione a JavaScript come linguaggio non solo legato al DOM. Pur sconsigliandone l'uso li elenchiamo per completezza.
| Campo | Descrizione |
|---|---|
| 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 (ormai deprecato da tempo), equivalente a <blink>esempio</blink> |
| bold() | evidenzia una stringa in grassetto: <b>esempio</b>s |
| fixed() | equivale al carattere monospazio HTML definibile con il tag <tt>testo</tt>, spesso renderizzato con il true type font Courier New |
| fontcolor() | imposta il colore del testo di una stringa con il tag <font> |
| fontsize() | imposta le dimensioni del testo di una stringa con il tag <font> |
| italics() | imposta la stringa in corsivo: <i>esempio</i> |
| small() | come per il metodo big() verrà visualizzato un carattere più piccolo di quello di default come in HTML con <small> |
| strike() | sarà visualizzato un testo sbarrato come in HTML con <strike>esempio</strike> |
| sub() | visualizza la stringa in "pedice" come in HTML con <sub>esempio</sub> |
| sup() | visualizza la stringa in "apice" come in HTML con <sup>esempio</sup> |
