HTML Entity Encode / Decode

Den HTML-Entity-Encoder/Decoder verwenden

1. Wähle Kodieren oder Dekodieren mit dem Modus-Schalter. Kodieren wandelt Zeichen wie <, >, &, " und Apostroph in HTML-Entities um; Dekodieren kehrt den Vorgang um und wandelt < wieder in <.
2. Füge ein oder tippe Text in das Eingabefeld. Die Ausgabe aktualisiert sich bei jedem Tastendruck, sodass du die Umwandlung in Echtzeit siehst, ohne etwas klicken zu müssen.
3. Aktiviere "Alle Nicht-ASCII kodieren" wenn du jedes Zeichen über Codepunkt 127 (Buchstaben mit Akzenten, Emoji, CJK) in numerische Entities umwandeln möchtest. Lasse es deaktiviert, um nur die fünf XML-Sonderzeichen zu kodieren.
4. Verwende die Tausch-Schaltfläche um die Ausgabe in die Eingabe zu verschieben und den Modus umzukehren. Damit kannst du einen String hin- und zurückkodieren, um sicherzustellen, dass deine Kodierung verlustfrei ist.

Was der Codec tut und wie er vorgeht

Der Encoder durchsucht den Eingabestring Zeichen für Zeichen. Für jedes Zeichen prüft er eine Ersetzungstabelle. Die Standardtabelle umfasst die fünf vordefinierten XML-Entities: & wird zu &, < zu <, > zu >, " zu ", und das Apostroph zu ' (die benannte Entity ' ist gültig in XML, war aber historisch in älteren HTML-Versionen nicht vorhanden, daher ist die numerische Form sicherer). Mit aktiviertem "Alle Nicht-ASCII kodieren" gibt jedes Zeichen mit einem Codepunkt über 127 &#Code; in dezimal aus.

Der Decoder verarbeitet drei Entity-Formen: benannte Entities aus der HTML-Liste der benannten Zeichenreferenzen (©, €, — und über 2.000 weitere), dezimale numerische Referenzen (©) und hexadezimale numerische Referenzen (©). Jede Sequenz, die keine erkannte Entity ist, bleibt unverändert. Surrogatpaare in numerischer Form werden zu einzelnen Codepunkten zusammengesetzt, sodass Entities wie 😀 korrekt in das lachende Emoji dekodiert werden.

Wann du dieses Werkzeug brauchst

• Einen Code-Ausschnitt, der < oder > enthält, in eine HTML-Seite einzufügen, ohne das umgebende Markup zu zerstören.
• Einen String für die sichere Aufnahme in ein XML-Dokument (SOAP-Anfrage, SVG, Atom-Feed) vorzubereiten, wo die fünf reservierten Zeichen kodiert sein müssen.
• Text aus einem älteren CMS zu bereinigen, wo alles als Entities gespeichert wurde, und du einfaches Unicode zurückmöchtest.
• Zu debuggen, warum eine Webseite & dreifach anzeigt - normalerweise ein Doppelkodierungsfehler, den du durch wiederholtes Dekodieren beheben kannst.
• Reines ASCII für ein System zu erstellen (altes SMTP, alte SMS-Gateways), das UTF-8 nicht zuverlässig übertragen kann.
• Einen langen eingefügten Text mit jeder Art von Satzzeichen zu kodieren, um zu sehen, welche in deinem Zielformat eine Maskierung benötigen.

Fallstricke

• Das Apostroph. ' wurde in HTML5 hinzugefügt, fehlte aber in HTML4, daher erkennen ältere Werkzeuge es möglicherweise nicht. Der Encoder verwendet die numerische Form ' für maximale Kompatibilität mit HTML 4 und XML 1.0.
• Semikolons sind erforderlich. Moderne Browser tolerieren fehlende Terminatoren bei Legacy-Entities (&copy ohne ;), aber ein strikter XML-Parser lehnt sie ab. Im Zweifelsfall das Semikolon immer einbeziehen.
• Numerische Grenzen. HTML-numerische Zeichenreferenzen über 0x10FFFF sind ungültig. Der Decoder verwirft Werte außerhalb des Bereichs still, anstatt eine Best-Effort-Konvertierung zu versuchen.
• Surrogatpaare. UTF-16-Surrogathaften (0xD800 bis 0xDFFF) sollten nicht als eigenständige Entities erscheinen. Wenn deine Eingabe diese enthält, gibt der Decoder das Ersatzzeichen U+FFFD aus, um das Problem anzuzeigen.
• Doppelt kodierte Eingabe. < ist ein String, bei dem ein Ampersand auf einer bereits kodierten Entity kodiert wurde. Ein Decode-Durchlauf ergibt <; ein zweiter ergibt <. Dekodiere erneut, bis die Ausgabe unverändert bleibt.

Spezifikationshintergrund

HTML-Zeichenreferenzen sind im HTML Living Standard der WHATWG definiert, insbesondere in den Abschnitten "Named character references" und "Character reference state" des Tokenizers. Die kanonische Liste der benannten Entities befindet sich unter html.spec.whatwg.org und enthält etwas über 2.000 Einträge, von denen einige Legacy-Kompatibilität mit oder ohne abschließendes Semikolon bieten. XML 1.0, Abschnitt 4.6, definiert nur die fünf vordefinierten Entities (amp, lt, gt, quot, apos) und erfordert, dass jede andere Entity in einer DTD deklariert wird. Das ist der Grund, warum ein String, der im Browser sauber dekodiert wird, in einem XML-Parser fehlschlagen kann - der XML-Parser hat kein implizites Wissen über ©. Numerische Zeichenreferenzen funktionieren in beiden Standards identisch.

Ähnliche Werkzeuge

Das html-Paket auf npm umschließt dieselben Entity-Tabellen und ist ein Drop-in-Ersatz, wenn diese Logik in einem Node-Skript benötigt wird. Das html-Modul der Python-Standardbibliothek (html.escape und html.unescape) deckt dieselben Anwendungsfälle ab. sed oder awk kann eine schnelle Fünf-Entity-Maskierung durchführen, kann aber nicht das vollständige benannte Entity-Lexikon verarbeiten. Die Chrome-DevTools-Konsole ermöglicht die Verwendung von document.createElement("textarea"), um einen String durch den eigenen Entity-Decoder des Browsers zu führen - schnell für einmalige Dekodierungen. Dieses Browser-Werkzeug erspart dir den Aufwand für all das, wenn du nur einen schnellen Hin- und Rücktransport brauchst.