Per me PHP non è solo un linguaggio di programmazione ma è anche un incredibile fonte di ispirazione quando si tratta di trovare nuove soluzioni con jQuery. PHP dispone di migliaia di funzioni che svolgono i compiti più disparati, quindi è naturale che gli stimoli non manchino. In questo articolo vedremo come trasformare la prima lettera di ciascuna parola in maiuscolo, ossia come implementare la funzione ucfirst() in jQuery.
Nodi di testo e stringhe in JavaScript
PHP e JavaScript hanno un modo simile di trattare le stringhe. Entrambi i linguaggi trattano infatti le stringhe come array di caratteri. Quindi se abbiamo una stringa come:
var str = 'Lorem';
str[0] corrisponderà al carattere L (e così via). Le stringhe hanno una proprietà length che restituisce il numero di caratteri da cui sono composte.
Nel DOM, un nodo di testo è sempre una stringa. Per nodo di testo si intende un nodo il cui valore della proprietà nodeType è impostato sul numero 3 (se si usa la notazione compatibile anche con Internet Explorer 7 e inferiori).
jQuery legge e scrive i nodi di testo degli elementi tramite il metodo text().
Implementazione
Possiamo creare il seguente plugin:
(function($) {
$.fn.ucfirst = function() {
var that = this;
var text = that.text();
return that.each(function() {
var parts = text.split(' '),
len = parts.length,
i, words = [];
for (i = 0; i < len; i++) {
var part = parts[i];
var first = part[0].toUpperCase();
var rest = part.substring(1, part.length);
var word = first + rest;
words.push(word);
}
that.text(words.join(' '));
});
};
})(jQuery);
Come si può notare, abbiamo esploso il testo di un elemento usando lo spazio come delimitatore di parola. Quindi abbiamo separato il primo carattere di ciascuna stringa dal resto della stringa, lo abbiamo trasformato in maiuscolo e quindi abbiamo riassemblato le parole che andranno a popolare un array che, una volta trasformato di nuovo in stringa, ricomporrà il testo dell'elemento.
Potete visionare l'esempio finale in questa pagina.