Calcolare le dimensioni (in byte) di un testo con JavaScript

In questo articolo ti spiegherò come sviluppare un applicazione JavaScript in grado di calcolare il peso, o dimensioni, di un testo qualsiasi in byte (kB e MB compresi), contenuto in un “textarea” o un paragrafo HTML ad esempio.

Programmare non è mai facile, lo sappiamo bene; sviluppare applicazioni, web o desktop, richiede molta conoscenza dei linguaggi, e bisogna sempre essere in grado di capire e risolvere eventuali errori e bug.

Un aspetto della programmazione, molto spesso sottovalutato, riguarda le dimensioni dei file. Mantenere un programma leggero, con la minima quantità di testo possibile, aiuta a semplificare il lavoro e ad alleggerire il carico hardware della macchina (PC).

Per questo motivo ho deciso di realizzare questa guida, per spiegare come implementare uno script per il calcolo delle dimensioni di una pagina web o un testo specifico contenuto in un documento HTML.

JavaScript per il calcolo delle dimensioni di un testo (in byte)

L’applicazione che sto per spiegare è visibile e perfettamente integrata nel nostro editor HTML online codewith.it, utilizzato per mostrare le dimensioni del documento scritto all’interno delle apposite aree di testo. Questo aiuta gli sviluppatori di pagine web a capire il peso in byte dei documenti HTML, CSS e JS scritti, utile per valutare un eventuale margine di riduzione degli stessi.

Nei seguenti paragrafi mostrerò lo script nel dettaglio.

HTML

Il codice HTML necessario si compone di pochissime righe, con lo scopo di definire l’area di testo su cui in codice JavaScript andrà ad agire.

<h1>Calcola peso (in byte) del testo</h1>
<textarea style="height:400px; width:300px" onkeyup="run()">Scrivi qui...</textarea>
<p>Dimensioni: <b>- byte</b></p>

Dunque, il codice HTML si suddivide in:

• Header (h1), tag irrilevante ai fini della nostra applicazione;
• Textarea, l’area di testo in cui scrivere le parole. Questa area, ogni qual volta verrà digitata una lettera, lancerà una funzione JavaScript chiamata “run()“, che vedremo di seguito.
• Paragrafo, qui verrà mostrata la dimensione (risultato) del testo contenuto nella precedente textarea.

Passiamo ora al codice JavaScript per il calcolo delle dimensioni in byte, kilobyte e megabyte del testo HTML.

JavaScript

Il codice Javascript:

function run(){
   const textEncoder = new TextEncoder();
   var text = document.getElementsByTagName("textarea")[0].value;
   var e = textEncoder.encode(text).length;
   var byte, kilo, mega;
   if (e < 1000){
      byte = e + " byte";   
    } 
   else if(e > 1000 && e < 1000000){ 
      kilo = Math.round((e) * 1) / 1000 ;     byte = kilo + " kB";   
    }   
   else if(e > 1000000 && e < 1000000000){
      kilo = Math.round((e) * 1) / 1000 ;
      mega = Math.round((kilo) * 1) / 1000 ;
      byte = mega  + " MB";
   }
   document.getElementsByTagName("b")[0].innerHTML = byte;
 }

Detto in maniera semplice, lo script qui sopra, racchiuso nella funzione “run()” eseguirà le seguenti operazioni:

• Creare una costante textEncoder. Questo metodo restituisce un oggetto TextEncoder con codifica utf-8 (prelevando il testo dalla textarea e codificandolo secondo lo standard utf-8).
• le variabili byte, kilo e mega, come si può facilmente intuire, sono rispettivamente il valore numerico in byte, kilobyte e megabyte. Queste sono dipendenti dalla variabile “e“, il valore generato dal textEncoder in byte.
• Il risultato verrà mostrato nel paragrafo HTML finale.

Per fare un esempio pratico, la sequenza “asdfghj” corrisponde ad un valore totale di 7 byte secondo la codifica utf-8, dunque verrà mostrato proprio quel valore numerico dallo script.

Superati i 1000 byte, il valore verrà approssimato in kilobyte (0.1 kB); superati i 1000000 byte, il valore verrà approssimato in megabyte (0.1 MB).

Codice completo

Il codice completo della funzione JavaScript per calcolare i byte di un testo in HTML:

<h1>Calcola peso (in byte) del testo</h1>
<textarea style="height:400px; width:300px" onkeyup="run()">Scrivi qui...</textarea>
<p>Dimensioni: <b>- byte</b></p>
<script>
function run(){
   const textEncoder = new TextEncoder();
   var text = document.getElementsByTagName("textarea")[0].value;
   var e = textEncoder.encode(text).length;
   var byte, kilo, mega;
   if (e < 1000){
      byte = e + " byte";   
    } 
   else if(e > 1000 && e < 1000000){ 
      kilo = Math.round((e) * 1) / 1000 ;     byte = kilo + " kB";   
    }   
   else if(e > 1000000 && e < 1000000000){
      kilo = Math.round((e) * 1) / 1000 ;
      mega = Math.round((kilo) * 1) / 1000 ;
      byte = mega  + " MB";
   }
   document.getElementsByTagName("b")[0].innerHTML = byte;
 }
</script>

Anteprima:

Dimensioni: – byte

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle