Lo spazio bianco in HTML comprende gli spazi propriamente detti ed i ritorni a capo. Nella struttura DOM di un elemento si può operare
sulla proprietà innerHTML di quest'ultimo cercando le ricorrenze del token \n tramite le espressioni regolari.
jQuery ci consente di operare questa ricerca con relativa semplicità.
In un elemento HTML la cui proprietà CSS white-space è impostata su normal, i ritorni a capo non hanno alcun
effetto sulla visualizzazione del testo e non si creeranno nuove righe anche se nel sorgente esse sono presenti.
Il seguente elemento:
<div id="test">
Lorem
ipsum
dolor
</div>
apparentemente presenta tre righe. In realtà le righe sono quattro, in quanto viene considerato ritorno a capo anche lo spazio che segue il tag di apertura.
Del resto possiamo verificarlo con jQuery:
var element = $('#test'),
newLine = /\n+/g,
html = element.html();
var newLines = html.match(newLine);
console.log(newLines); // Array[4]
Il primo ritorno a capo non è rilevante ai fini del calcolo del numero di righe, quindi possiamo eliminarlo:
element.html(html.replace(/^\n+/, ''));
var $html = element.html();
console.log($html.match(newLine)); // Array[3]
A questo punto proviamo ad ottenere un array di righe:
var lines = $html.split(newLine);
console.log(lines); // ["Lorem", "ipsum", "dolor", ""]
Il quarto valore è vuoto ed a questo punto è sufficiente usare il metodo pop() degli array per ottenere il risultato voluto.
Purtroppo questa soluzione non è supportata pienamente in Internet Explorer a causa del diverso valore assegnato al token del ritorno a capo:
infatti in IE il token in uso è \r\n.
È bene notare che spesso è consigliabile utilizzare il metodo text(), soprattutto se l'elemento ha nodi figlio al suo interno.