HTML-Entity-Encoder / Decoder

Eine HTML-Entity ist eine kurze Zeichenfolge, die ein Zeichen im HTML-Quellcode repraesentiert. Entities werden verwendet, wenn ein Zeichen in rohem HTML zweideutig oder ungueltig waere – zum Beispiel begrenzen die Zeichen `<` und `>` HTML-Tags, sodass ein woertliches `<` im Textinhalt als `&lt;` geschrieben werden muss, damit der Browser es nicht als Anfang eines Tags missversteht.

HTML-Entities gibt es in zwei Formen. Benannte Entities verwenden einen lesbaren Namen nach `&` und vor `;`, zum Beispiel `&amp;` fuer ein Und-Zeichen, `&copy;` fuer ein Copyright-Symbol oder `&mdash;` fuer einen Gedankenstrich. Numerische Entities verwenden stattdessen einen dezimalen oder hexadezimalen Unicode-Codepunkt – `&#169;` und `&#xA9;` erzeugen beide das Copyright-Symbol ©.

Die fuenf reservierten HTML-Zeichen, die jeder Entwickler kennen sollte:

• `&amp;` – das Und-Zeichen `&`
• `&lt;` – das Kleiner-als-Zeichen `<`
• `&gt;` – das Groesser-als-Zeichen `>`
• `&quot;` – das doppelte Anfuehrungszeichen `"`
• `&#39;` – das Apostroph / einfache Anfuehrungszeichen `'`

Darueber hinaus definiert HTML benannte Entities fuer Hunderte weiterer Zeichen: Akzentbuchstaben (`&eacute;` = e mit Akut), geschuetzte Leerzeichen (`&nbsp;`), typografische Zeichen (`&mdash;` = Gedankenstrich), Waehrungssymbole (`&euro;` = Euro-Zeichen), mathematische Symbole und griechische Buchstaben.

Kodiere HTML-Entities immer dann, wenn du reinen Text in ein HTML-Dokument einbettest und dieser Text Zeichen enthalten koennte, die in HTML eine besondere Bedeutung haben. Die haeufigsten Situationen sind:

• Einfuegen von nutzergenerierten Inhalten oder Blog-Texten in ein CMS oder Template, das rohen HTML speichert.
• Einbetten von Code-Beispielen in Blogposts oder Dokumentationsseiten – ein Snippet wie `<strong>fett</strong>` muss als `&lt;strong&gt;fett&lt;/strong&gt;` kodiert werden, damit der Browser es als sichtbaren Text rendert.
• Erstellen von JSON-Payloads, die in HTML-`<script>`-Tags eingebettet werden, wo `<`, `>` und `&` die umgebende HTML-Struktur beschaedigen koennen.
• Speichern von Attributwerten, die doppelte Anfuehrungszeichen enthalten, um die umgebenden `"..."` Begrenzungszeichen nicht zu zerstoeren.
• Kodieren von Sonderzeichen fuer HTML-E-Mail-Templates.

Verwende den Basismodus, wenn du nur die fuenf reservierten Zeichen escapen musst. Verwende den erweiterten Modus fuer maximale HTML-Kompatibilitaet oder fuer Legacy-Systeme, die nur ASCII unterstuetzen.

Dekodiere HTML-Entities, wenn du bereits eskierten Text erhaeltst und die urspruenglichen Zeichen lesen, verarbeiten oder anzeigen musst. In Suchbegriffen wird dies oft als HTML-Decode, HTML-Unescape oder HTML-Entity-Konvertierung bezeichnet. Typische Situationen:

• API-Antworten, deren String-Felder HTML-eskierten Text enthalten – zum Beispiel `Tom &amp; Jerry`, wenn du `Tom & Jerry` erwartest. In diesem Fall musst du HTML-Entities in Text umwandeln.
• Doppelt kodierte CMS-Inhalte, bei denen bereits eskierter Text erneut eskiert wurde und Zeichenfolgen wie `&amp;lt;` statt `&lt;` oder `<` entstanden sind.
• RSS- oder Atom-Feed-Eintraege, deren Textinhalt typischerweise HTML-kodiert ist.
• Log-Zeilen mit HTML-eskierten Query-Parametern oder Fehlermeldungen.
• Sichtbaren Text aus einer HTML-Quelldatei kopieren, in der Inhalte als Entities gespeichert sind.

Dieses Tool dekodiert sowohl benannte Entities (`&amp;`, `&copy;`, `&mdash;`, `&nbsp;` und Hunderte mehr) als auch numerische Entities in dezimaler (`&#169;`) und hexadezimaler (`&#xA9;`) Notation.

Dieser Encoder bietet zwei Kodierungsebenen.

Der Basismodus kodiert nur die fuenf reservierten HTML-Zeichen: `&` wird zu `&amp;`, `<` zu `&lt;`, `>` zu `&gt;`, `"` zu `&quot;`, `'` zu `&#39;`. Alle anderen Zeichen – einschliesslich Akzentbuchstaben wie `é` und `ü`, Symbole wie `©` und `—` sowie Emojis wie 😀 – werden unveraendert durchgeleitet. Verwende den Basismodus, wenn deine Zielumgebung Unicode nativ unterstuetzt.

Der erweiterte Modus kodiert dieselben fuenf reservierten Zeichen und wandelt zusaetzlich jedes Nicht-ASCII-Zeichen in eine dezimale numerische Entity um. Zum Beispiel wird `é` zu `&#233;`, `©` zu `&#169;`, `—` zu `&#8212;` und 😀 zu `&#128512;`. Verwende den erweiterten Modus fuer reinen ASCII-Output oder bei Legacy-Systemen, die keine Mehrbyte-Zeichen unterstuetzen.

Entwickler suchen nach derselben Aufgabe oft mit Begriffen wie htmlDecode, htmlEncode, HTML-Escape, HTML-Unescape, HTML kodieren oder HTML dekodieren. Die Formulierung variiert, das Ziel ist dasselbe: sicher zwischen lesbaren Zeichen und deren HTML-Entity-Darstellung konvertieren.

Beispiel Hin- und Rueckkodierung im Basismodus:

• Eingabe: `Café & © 😀`
• Kodiert (Basis): `Café &amp; © 😀`
• Dekodiert: `Café & © 😀`

Beispiel Hin- und Rueckkodierung im erweiterten Modus:

• Eingabe: `Café & © 😀`
• Kodiert (erweitert): `Caf&#233; &amp; &#169; &#128512;`
• Dekodiert: `Café & © 😀`

HTML-Entity-Kodierung und URL-Kodierung sind zwei voellig unterschiedliche Mechanismen mit unterschiedlichen Zwecken und unterschiedlichem Output – auch wenn beide Sonderzeichen in eine alternative Darstellung umwandeln.

HTML-Entity-Kodierung ist fuer HTML-Dokumente gedacht. Sie ersetzt Zeichen mit besonderer HTML-Bedeutung durch Entity-Sequenzen, die der HTML-Parser als Textinhalt behandelt. Das Ergebnis ist weiterhin lesbarer Text – `&amp;` wird im Browser als `&` angezeigt.

URL-Kodierung (Prozentkodierung) ist fuer URLs gedacht. Sie ersetzt Zeichen, die in einer URL unsicher oder reserviert sind, durch prozentcodierte Byte-Sequenzen. Ein Leerzeichen wird zu `%20`, ein Und-Zeichen zu `%26`, ein Kleiner-als zu `%3C`.

Vergleich derselben Zeichen in beiden Systemen:

• `&` – HTML: `&amp;`, URL: `%26`
• `<` – HTML: `&lt;`, URL: `%3C`
• `>` – HTML: `&gt;`, URL: `%3E`
• `"` – HTML: `&quot;`, URL: `%22`
• `'` – HTML: `&#39;`, URL: `%27`

Wenn du HTML-kodierten Text in einen URL-Encoder einfuegst, werden die Entity-Zeichen selbst (`&`, `;`, `#`) erneut kodiert – was fast nie gewuenscht ist. Verwende dieses Tool fuer HTML-Entity-Kodierung, HTML-Entity-Dekodierung und die Umwandlung von HTML-kodiertem Text zurueck in lesbaren Text.

HTML-Entity-Kodierung (dieses Tool) wandelt Zeichen in ihre HTML-Entity-Aequivalente um und kehrt diesen Prozess um. Es werden keine HTML-Elemente hinzugefuegt, entfernt oder umstrukturiert. Die Dokumentstruktur bleibt erhalten; nur die Darstellung von Sonderzeichen aendert sich.

HTML-Bereinigung ist ein anderer Vorgang, der HTML-Markup entfernt oder umschreibt – ungewuenschte Tags loescht, Attribute normalisiert oder potenziell gefaehrliche Inhalte bereinigt. Eine Bereinigungsfunktion koennte `<b onclick="...">fett</b>` in `<b>fett</b>` oder nur `fett` umwandeln.

Dieses Tool bereinigt kein HTML. Wenn du rohes HTML in den Encoder einfuegst, kodiert es die spitzen Klammern und andere reservierte Zeichen im Markup und wandelt `<p>Hallo</p>` in `&lt;p&gt;Hallo&lt;/p&gt;` um. Es prueft, entfernt oder strukturiert keine Elemente um.

Ebenso ist dieses Tool kein Text-Bereiniger. Es entfernt keine ueberfluessigen Leerzeichen, entfernt keine Akzente und normalisiert keine Zeilenumbrueche. Seine einzige Aufgabe ist das Kodieren und Dekodieren von HTML-Entities.