Kostenloser HTML-Entity-Encoder — HTML escapen

Was ist HTML-Entity-Kodierung?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

Hauptfunktionen

Praktische Beispiele

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

So verwendest du den HTML-Entity-Encoder

1. 1

   Füge dein HTML oder deinen Text ein

   Lege das Markup oder den reinen Text, den du escapen willst, in das Eingabefeld. Die kodierte Ausgabe aktualisiert sich live, während du tippst — es gibt keinen Absenden-Knopf und nichts wird irgendwohin gesendet.

2. 2

   Wähle das Entity-Format

   Benannt ist der lesbare Standard (<, &, ©). Wechsle zu Dezimal (<) oder Hex (<), wenn ein verarbeitendes System numerische Referenzen bevorzugt oder du nicht garantieren kannst, dass benannte Entities unterstützt werden.

3. 3

   Optional alle Nicht-ASCII kodieren

   Lass dies für moderne UTF-8-Seiten aus, damit Akzente und Emoji als lesbare rohe Zeichen bleiben. Aktiviere es nur, wenn der Text einen Legacy-Single-Byte-Zeichensatz überstehen muss, was jedes Zeichen oberhalb von 0x7F in eine ASCII-sichere Entity umwandelt.

4. 4

   Kopiere das kodierte Ergebnis

   Klicke auf Kopieren, um die escapte Zeichenkette in deine Zwischenablage zu legen, bereit zum Einfügen in eine Vorlage, eine Dokumentationsseite oder ein Datenbankfeld. Leeren setzt beide Bereiche für das nächste Snippet zurück.

5. 5

   Die Umkehrung nötig? Richtung tauschen

   Nutze „Richtung tauschen“, um zum HTML-Entity-Decoder zu wechseln, wenn du Entities zurück in die Zeichen verwandeln willst, die sie repräsentieren.

Häufige Fehler beim HTML-Kodieren

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Wer dieses Tool nutzt

Codebeispiele auf einer Webseite anzeigen

Schreibst du ein Tutorial oder eine Dokumentation, die wörtliches HTML zeigen muss? Escape das Snippet, damit <strong>bold</strong> als Text erscheint, statt zu rendern. Füge das Markup ein, kopiere die escapte Ausgabe und lege sie in einen <pre>- oder <code>-Block.

Benutzereingaben gegen XSS bereinigen

Bevor du irgendeine benutzergelieferte Zeichenkette in dein HTML einfügst, escape die fünf reservierten Zeichen, damit eine Payload wie <script>…</script> zu inertem Text wird. Das ist die grundlegende Abwehr gegen Cross-Site-Scripting, wenn du Markup von Hand baust.

Markup in einem Datenbankfeld oder JSON speichern

Musst du ein HTML-Fragment als reine Zeichenkette speichern, ohne dass es nachgelagert interpretiert wird? Kodiere es zuerst, damit spitze Klammern und kaufmännische Und Speicherung und erneute Anzeige unversehrt überstehen, und dekodiere es auf dem Rückweg.

E-Mail-Vorlagen und CMS-Inhalte verfassen

E-Mail-Clients und Content-Management-Systeme sind unnachgiebig bei rohen Sonderzeichen. Escape die reservierte Menge — und optional alle Nicht-ASCII — damit deine Vorlage konsistent über Clients hinweg rendert, die deinen Zeichensatz womöglich nicht teilen.

Text für einen Legacy-Zeichensatz umwandeln

Zielst du auf ein System, das rohes UTF-8 nicht verarbeiten kann? Schalte „Alle Nicht-ASCII kodieren“ ein, um jeden akzentuierten Buchstaben, jedes Symbol und jedes Emoji als ASCII-sichere Entity umzuschreiben und zu garantieren, dass der Text den Transport durch 7-Bit-saubere Pipelines übersteht.

XML- und SVG-Attributwerte escapen

XML und Inline-SVG teilen sich HTMLs reservierte Zeichen. Kodiere Anführungszeichen und spitze Klammern, damit sich eine Zeichenkette mit eingebettetem Markup sicher in einen Attributwert einfügt, ohne die Dokumentstruktur zu zerbrechen.

Eine Entity schnell nachschlagen

Vergessen, ob das Markenzeichen ™ oder ™ ist? Tippe das Zeichen, lies seine benannte, dezimale und Hex-Entity aus der Ausgabe ab oder konsultiere die integrierte Schnellreferenztabelle, ohne die Seite zu verlassen.

Wie der Encoder funktioniert

Modus „Sonderzeichen“ (Standard)

Standardmäßig werden nur die fünf HTML-reservierten Zeichen escaped — & < > " ' — gemäß den WHATWG-Serialisierungsregeln für sichere Ausgabe. & wird zuerst ersetzt, damit die für die anderen Zeichen erzeugten Entities nicht doppelt escaped werden. Alle übrigen Zeichen, einschließlich Nicht-ASCII, laufen unverändert durch.

Der Apostroph verwendet '

Statt des benannten ' — das in HTML4 undefiniert und in einigen Legacy-Parsern unsicher ist — wird das einfache Anführungszeichen als numerisches ' (dezimal ') ausgegeben und referenziert U+0027. Das entspricht der Konvention gut getesteter Bibliotheken wie he und garantiert, dass die Ausgabe in HTML4, HTML5 und XML gleichermaßen sicher ist.

Benannte, dezimale und Hex-Kodierung

Der Format-Selektor steuert, wie jedes escapte Zeichen geschrieben wird: Benannt verwendet definierte Labels, wo sie existieren (<, ©), Dezimal schreibt den Unicode-Codepunkt zur Basis 10 (<), und Hex schreibt ihn zur Basis 16 (<). Numerische Formen referenzieren dieselben Codepunkte wie die benannten Formen und sind beim Parsen austauschbar.

Option „Alle Nicht-ASCII kodieren“

Wenn aktiviert, wird jedes Zeichen mit einem Codepunkt oberhalb von 0x7F im gewählten Format in eine Entity umgewandelt — café wird zu café (benannt), café (dezimal) oder café (hex). Astrale Zeichen wie Emoji werden mit ihrem vollen Codepunkt kodiert (😀 → 😀). Das erzeugt 7-Bit-saubere ASCII-Ausgabe für Legacy-Transport.

Zeichensatz versus Entities

Ein Zeichensatz definiert, wie Text als Bytes gespeichert wird; eine Entity ist eine Möglichkeit, ein Zeichen nur mit ASCII zu schreiben. Auf einer UTF-8-Seite brauchen Nicht-ASCII-Zeichen keine Entity, weshalb der Standard sie roh lässt. Alles zu kodieren ist nur nötig, wenn die Ausgabe einen Nicht-Unicode-Zeichensatz oder ein UTF-8-feindliches System durchqueren muss.

Browser-lokal, null Netzwerk

Die Kodierung läuft synchron in JavaScript im Hauptthread; es gibt keinen API-Aufruf, keinen Worker-Roundtrip zu einem Server und keine Persistenz. Die Eingabe verlässt nie die Seite, was du bestätigen kannst, indem du beim Tippen ein leeres Netzwerk-Panel beobachtest.

Best Practices für HTML-Escaping

Bei der Ausgabe escapen, im richtigen Kontext

Kodiere Daten in dem Moment, in dem du sie in HTML einfügst, nicht beim Empfang, und passe die Kodierung an den Kontext an. HTML-Entity-Kodierung ist für HTML-Element- und Attributinhalt; verwende URL-Kodierung innerhalb von URLs und JavaScript/JSON-Escaping innerhalb von Skriptblöcken. Im falschen Kontext zu escapen lässt ein Loch offen.

Nicht vertrauenswürdige Eingaben immer escapen

Jede Zeichenkette, die von einem Benutzer, einem Upload oder einer externen API stammt, muss escaped werden, bevor sie in deinem Markup landet. Das ist die zentrale XSS-Abwehr: Eine Payload wie <script>alert(1)</script> wird zu inertem Text, sobald die spitzen Klammern Entities sind.

Eingebautes Escaping bevorzugen, wo es existiert

React, Vue und die meisten serverseitigen Templating-Engines escapen interpolierten Text automatisch; das Setzen von element.textContent escapt ebenfalls für dich. Verwende dieses Tool für einmalige Umwandlungen und zum Verständnis der Ausgabe — aber im Anwendungscode stütze dich auf das Auto-Escaping des Frameworks, statt es selbst zu schreiben.

Nicht-ASCII auf UTF-8-Seiten roh lassen

Wenn deine Seite <meta charset="utf-8"> deklariert, kodiere Akzente und Emoji nicht in Entities — rohes UTF-8 ist kürzer, lesbarer und genauso korrekt. Reserviere „Alle Nicht-ASCII kodieren“ für die echten Legacy-Zeichensatz-Fälle, die es tatsächlich erfordern.

Den numerischen Apostroph in gemischten Kontexten nutzen

Wenn die Ausgabe von älteren Parsern, XML-Prozessoren oder E-Mail-Clients verarbeitet werden könnte, bevorzuge das numerische ' gegenüber dem benannten ' für das einfache Anführungszeichen. Die numerische Form wird überall verstanden; die benannte nicht, und ein versehentliches wörtliches „'“ im gerenderten Text ist ein häufiger, vermeidbarer Fehler.

Häufig gestellte Fragen