Codifica / Decodifica entità HTML

Le entità HTML sono codici brevi che rappresentano caratteri riservati in HTML o difficili da digitare. Ognuna inizia con una e commerciale e termina con un punto e virgola — ad esempio &amp; è una e commerciale (&), &lt; è un segno minore di (<) e &copy; è il simbolo del copyright (©). Permettono a un carattere di essere visualizzato letteralmente invece di essere interpretato come markup, e garantiscono che un simbolo venga reso correttamente anche se la codifica dei caratteri della pagina non lo include. Le incontrerai continuamente quando scrivi HTML a mano o sanitizzi l'input utente nelle applicazioni web.

Incolla il tuo testo nel pannello di sinistra e mantieni la modalità su Codifica. Scegli quali caratteri scappare — solo quelli riservati (< > & " '), i riservati più ogni carattere non ASCII, oppure tutto — e se vuoi un output named, decimale o esadecimale. Ad esempio, con l'opzione named, 'Pesce & patate <3' diventa 'Pesce &amp; patate &lt;3'. Il risultato appare istantaneamente a destra. Clicca Copia e incollalo direttamente nel tuo HTML. Tutto avviene nel browser — nessun upload di file, nessun account richiesto e nessun limite sulla quantità di testo che puoi codificare in una volta.

Imposta la modalità su Decodifica e incolla l'HTML codificato nel pannello di sinistra; il testo leggibile appare istantaneamente a destra. Lo strumento comprende entità named, decimali ed esadecimali, quindi &lt;div&gt; Tom &amp; Jerry &#169; si decodifica in <div> Tom & Jerry ©. Usa il pulsante Scambia per invertire i pannelli se vuoi ricodificare il risultato. Il decoder gestisce tipi misti di entità nella stessa stringa — named, decimali ed esadecimali possono apparire insieme e ciascuno viene decodificato correttamente. L'encoder di entità di FreeFormatter.com richiede un invio del modulo e un ricaricamento della pagina per ogni conversione; questo strumento si aggiorna in tempo reale mentre digiti.

Queste sono le quattro entità HTML più comuni. &amp; è una e commerciale (&), &lt; è un segno minore di (<), &gt; è un segno maggiore di (>), e &nbsp; è uno spazio non divisibile — uno spazio che impedisce al browser di andare a capo o di comprimerlo, utile tra un valore e la sua unità come 10&nbsp;kg in modo che non vengano mai separati su due righe. Devi scappare & come &amp; prima di qualsiasi altro, altrimenti &amp; stesso può essere erroneamente interpretato come inizio di una nuova entità e causare problemi di doppia codifica.

Sono tre modi di scrivere lo stesso carattere. Un'entità named usa una parola chiave memorabile (&amp;); un'entità numerica decimale usa il code point Unicode del carattere in base 10 (&#38;); un'entità esadecimale usa la base 16 (&#x26;). Tutte e tre producono una e commerciale. Le entità named sono le più leggibili, ma solo circa 2.000 caratteri hanno nomi, quindi le entità numeriche sono il fallback per tutto il resto — compresi gli emoji, dove la faccina sorridente 😀 è &#128512;. In caso di dubbio, le entità named sono le più sicure per la leggibilità. Lo standard HTML5 ha ampliato significativamente la lista delle entità named rispetto all'HTML4; questo strumento copre l'intero set HTML5 di oltre 2.200 riferimenti a caratteri named.

Tre caratteri hanno un significato speciale nel contenuto della pagina e dovrebbero sempre essere scappati: & (&amp;), < (&lt;) e > (&gt;). All'interno dei valori degli attributi dovresti scappare anche " (&quot;) e ' (&#39;). Scappa prima la e commerciale, altrimenti &amp; stesso può essere erroneamente interpretato come inizio di un'entità e venire doppiamente scappato. L'opzione 'Riservati' della modalità Codifica gestisce esattamente questi cinque caratteri e lascia intatto il resto del testo — ideale per sanitizzare l'input dei form o l'output dei template senza sovra-codificare caratteri che non ne hanno bisogno.

Le frecce comuni sono &larr; (←), &rarr; (→), &uarr; (↑), &darr; (↓) e &harr; (↔), con versioni a doppia linea &lArr;, &rArr; e &hArr; (⇐ ⇒ ⇔). Per qualsiasi altro simbolo, usa la lista ricercabile qui sotto — digita 'arrow', 'heart' o 'euro', poi clicca il codice named, decimale o esadecimale per copiarlo. La lista completa copre punteggiatura, simboli matematici, lettere greche, simboli di valuta e centinaia di caratteri speciali, aggiornati allo standard HTML5 di riferimento per i caratteri named. W3Schools elenca solo circa 255 entità; questo strumento ne ha oltre 2.200.

Il classico trucco del browser è lasciare che il DOM decodifichi al posto tuo: crea una textarea scollegata, imposta il suo innerHTML sulla stringa con le entità e leggi il suo valore. Ad esempio: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; poi el.value restituisce '<b> & ©'. Non esiste una funzione decodeHTMLEntities() integrata in JavaScript puro, quindi questo approccio DOM — o un piccolo helper che passa i token delle entità a una textarea in modo che il markup isolato non possa fuoriuscire — è il pattern standard. Questo strumento fa esattamente questo, ed è per questo che è sicuro da usare con markup non attendibile senza rischi di XSS.

È una doppia codifica. Il testo è stato scappato una volta (trasformando & in &amp;) e poi di nuovo (trasformando la & di &amp; in &amp;amp;), di solito perché un framework ha auto-scappato un output che era già scappato. Questo è comune nei CMS PHP e in alcuni motori di template che scappano tutto l'output per impostazione predefinita — Twig, Smarty e alcuni hook di WordPress legacy fanno tutti così. Incolla il valore in Decodifica qui una volta per confermare la doppia codifica, poi assicurati che il tuo template marchi il valore come sicuro o lo scappi una sola volta al momento dell'output.

Usa &copy; per ©, &reg; per ®, &trade; per ™ e &mdash; per un trattino em (—). Per un trattino en usa &ndash; (–) e per i puntini di sospensione usa &hellip; (…). Puoi anche incollare il simbolo direttamente su una pagina UTF-8, ma l'entità named è inequivocabile e sopravvive a una modifica della codifica. Su una pagina UTF-8 (che è praticamente tutto oggi), incollare © direttamente funziona bene. Le entità named rimangono la scelta più sicura per le email HTML, dove le ipotesi di codifica variano tra i client di posta come Outlook, Gmail e Apple Mail.

È &nbsp; (numerico &#160; o &#xA0;). Uno spazio non divisibile mantiene due parole, o un valore e la sua unità, sulla stessa riga e impedisce al browser di comprimere gli spazi ripetuti — ad esempio Sig.&nbsp;Rossi o 5&nbsp;km. Non abusarne per il layout, però; usa i margini o il padding CSS per la spaziatura. Un errore comune è usare più entità &nbsp; per indentare il testo o creare colonne — questa è una cattiva pratica e si rompe quando la pagina viene ridimensionata o visualizzata da uno screen reader, che legge ad alta voce 'spazio non divisibile' per ognuna.

Sì. Le entità named sono sensibili alle maiuscole, quindi &amp; funziona ma &Amp; o &AMP; potrebbero non funzionare, e &Sigma; (Σ) è un carattere completamente diverso da &sigma; (σ). Le entità numeriche sono sensibili alle maiuscole solo nella x facoltativa di un'entità esadecimale — &#xA9; e &#xa9; danno entrambi ©. In caso di dubbio, copia il codice esatto dalla lista di riferimento qui invece di digitarlo a memoria. Sbagliare le maiuscole su un'entità named causa la visualizzazione del codice grezzo invece del simbolo, il che è una fonte comune di bug nei template HTML scritti a mano.

FreeFormatter.com e W3Schools forniscono entrambi tabelle di riferimento statiche per le entità HTML, ma puoi solo cercare i codici — non puoi codificare o decodificare il tuo testo. L'encoder di entità di FreeFormatter è l'alternativa più simile, ma richiede un invio del modulo e un ricaricamento della pagina per ogni conversione, e la sua lista di entità copre solo le entità named HTML 4. W3Schools mostra circa 255 entità named. Questo strumento copre l'intero set di riferimenti per caratteri named HTML5 — oltre 2.200 voci — e combina il riferimento ricercabile con un encoder e decoder live in un unico posto, aggiornandosi in tempo reale mentre digiti.

Sì, l'encoder, il decoder e la lista delle entità funzionano tutti completamente sui browser mobile, inclusi Chrome su Android e Safari su iPhone. Il layout si adatta agli schermi più piccoli in modo che i due pannelli si impilino verticalmente. Un consiglio per il mobile: tieni premuto su una cella nella lista delle entità per attivare l'opzione di copia del browser se il copia con un clic non si attiva immediatamente. Non è necessario scaricare nessuna app — lo strumento funziona come una normale pagina web in qualsiasi browser mobile moderno. Non c'è registrazione, nessun account e nessun limite di utilizzo su nessun dispositivo. Funziona anche offline una volta caricata la pagina.