Gratis HTML-entiteiten encoder — HTML escapen

Wat is HTML-entiteitencodering?

// 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

Belangrijkste functies

Uitgewerkte voorbeelden

<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)

Zo gebruik je de HTML-entiteiten encoder

1. 1

   Plak je HTML of tekst

   Zet de opmaak of platte tekst die je wilt escapen in het invoervak. De geëncodeerde uitvoer wordt live bijgewerkt terwijl je typt — er is geen verzendknop en er wordt niets ergens heen gestuurd.

2. 2

   Kies de entiteitnotatie

   Genoemd is de leesbare standaard (<, &, ©). Schakel over naar Decimaal (<) of Hex (<) wanneer een ontvangend systeem numerieke referenties verkiest of je niet kunt garanderen dat genoemde entiteiten ondersteund worden.

3. 3

   Eventueel alle niet-ASCII encoderen

   Laat dit uit voor moderne UTF-8-pagina's, zodat accenten en emoji als leesbare ruwe tekens blijven. Vink het alleen aan wanneer de tekst een verouderde single-byte-tekenset moet overleven, waarbij elk teken boven 0x7F naar een ASCII-veilige entiteit wordt omgezet.

4. 4

   Kopieer het geëncodeerde resultaat

   Klik op Kopiëren om de geëscapede tekenreeks op je klembord te zetten, klaar om in een sjabloon, een documentatiepagina of een databaseveld te plakken. Wissen stelt beide vensters opnieuw in voor het volgende fragment.

5. 5

   Het omgekeerde nodig? Wissel de richting

   Gebruik Richting omwisselen om over te schakelen naar de HTML-entiteiten decoder wanneer je entiteiten terug wilt zetten naar de tekens die ze vertegenwoordigen.

Veelgemaakte fouten bij HTML-encoderen

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

Wie gebruikt deze tool

Codevoorbeelden op een webpagina tonen

Schrijf je een tutorial of documentatie die letterlijke HTML moet tonen? Escape het fragment zodat <strong>bold</strong> als tekst verschijnt in plaats van te renderen. Plak de opmaak, kopieer de geëscapede uitvoer en zet die in een <pre>- of <code>-blok.

Gebruikersinvoer ontsmetten tegen XSS

Escape de vijf gereserveerde tekens voordat je een door gebruikers ingevoerde tekenreeks in je HTML invoegt, zodat een payload als <script>…</script> inerte tekst wordt. Dit is de fundamentele verdediging tegen cross-site scripting wanneer je opmaak met de hand bouwt.

Opmaak opslaan in een databaseveld of JSON

Moet je een HTML-fragment als platte tekenreeks bewaren zonder dat het verderop geïnterpreteerd wordt? Encodeer het eerst zodat de punthaken en ampersands de opslag en herweergave intact overleven, en decodeer het op de terugweg.

E-mailsjablonen en CMS-inhoud opstellen

E-mailclients en contentmanagementsystemen zijn onverbiddelijk over ruwe speciale tekens. Escape de gereserveerde set — en eventueel alle niet-ASCII — zodat je sjabloon consistent rendert over clients die je tekenset misschien niet delen.

Tekst omzetten voor een verouderde tekenset

Mik je op een systeem dat geen ruwe UTF-8 aankan? Zet "Alle niet-ASCII encoderen" aan om elke letter met accent, symbool en emoji als ASCII-veilige entiteit te herschrijven, zodat de tekst het transport door 7-bit-schone pijplijnen overleeft.

XML- en SVG-attribuutwaarden escapen

XML en inline-SVG delen de gereserveerde tekens van HTML. Encodeer aanhalingstekens en punthaken zodat een tekenreeks met ingebedde opmaak veilig in een attribuutwaarde past zonder de documentstructuur te breken.

Snel een entiteit opzoeken

Vergeten of het handelsmerkteken ™ of ™ is? Typ het teken, lees de genoemde, decimale en hex-entiteit af van de uitvoer, of raadpleeg de ingebouwde snelreferentietabel zonder de pagina te verlaten.

Hoe de encoder werkt

Modus speciale tekens (standaard)

Standaard worden alleen de vijf HTML-gereserveerde tekens geëscaped — & < > " ' — volgens de WHATWG-serialisatieregels voor veilige uitvoer. & wordt eerst vervangen zodat de entiteiten voor de andere tekens niet dubbel geëscaped worden. Alle overige tekens, inclusief niet-ASCII, gaan ongewijzigd door.

De apostrof gebruikt '

In plaats van de genoemde &apos; — die ongedefinieerd is in HTML4 en onveilig in sommige verouderde parsers — wordt het enkele aanhalingsteken als de numerieke ' (decimaal ') weergegeven, verwijzend naar U+0027. Dit komt overeen met de conventie van goed geteste bibliotheken als he en garandeert dat de uitvoer veilig is in HTML4, HTML5 en XML.

Genoemde, decimale en hex-encodering

De notatieselector bepaalt hoe elk geëscaped teken geschreven wordt: Genoemd gebruikt gedefinieerde labels waar die bestaan (<, ©), Decimaal schrijft het Unicode-codepunt in grondtal 10 (<) en Hex schrijft het in grondtal 16 (<). Numerieke vormen verwijzen naar dezelfde codepunten als de genoemde vormen en zijn bij het parsen uitwisselbaar.

Optie om alle niet-ASCII te encoderen

Wanneer ingeschakeld wordt elk teken met een codepunt boven 0x7F omgezet in een entiteit in de gekozen notatie — café wordt café (genoemd), café (decimaal) of café (hex). Astrale tekens zoals emoji worden met hun volledige codepunt geëncodeerd (😀 → 😀). Dit levert 7-bit-schone ASCII-uitvoer op voor verouderd transport.

Tekenset versus entiteiten

Een tekenset bepaalt hoe tekst als bytes opgeslagen wordt; een entiteit is een manier om een teken te spellen met alleen ASCII. Op een UTF-8-pagina hebben niet-ASCII-tekens geen entiteit nodig, en daarom laat de standaard ze ruw. Alles encoderen is alleen nodig wanneer de uitvoer een niet-Unicode-tekenset of een UTF-8-vijandig systeem moet passeren.

Browser-lokaal, nul netwerk

Het encoderen draait synchroon in JavaScript op de hoofdthread; er is geen API-aanroep, geen worker-retour naar een server en geen opslag. De invoer verlaat de pagina nooit, wat je kunt bevestigen door tijdens het typen naar een leeg Netwerk-paneel te kijken.

Best practices voor HTML escapen

Escape bij de uitvoer, in de juiste context

Encodeer data op het moment dat je die in HTML invoegt, niet wanneer je die ontvangt, en stem de encodering af op de context. HTML-entiteitencodering is voor HTML-element- en attribuutinhoud; gebruik URL-encodering binnen URL's en JavaScript-/JSON-escaping binnen scriptblokken. Escapen in de verkeerde context laat een gat open.

Escape altijd niet-vertrouwde invoer

Elke tekenreeks afkomstig van een gebruiker, een upload of een externe API moet geëscaped worden voordat die in je opmaak belandt. Dit is de kern-XSS-verdediging: een payload als <script>alert(1)</script> wordt inerte tekst zodra de punthaken entiteiten zijn.

Verkies ingebouwd escapen waar het bestaat

React, Vue en de meeste server-templatingengines escapen geïnterpoleerde tekst automatisch; het instellen van element.textContent escapet ook voor je. Gebruik deze tool voor losse conversies en om de uitvoer te begrijpen — maar leun in applicatiecode op het automatische escapen van het framework in plaats van het zelf te schrijven.

Laat niet-ASCII ruw op UTF-8-pagina's

Als je pagina <meta charset="utf-8"> declareert, encodeer accenten en emoji dan niet in entiteiten — ruwe UTF-8 is korter, leesbaarder en even correct. Reserveer "Alle niet-ASCII encoderen" voor de echte verouderde-tekenset-gevallen die het werkelijk vereisen.

Gebruik de numerieke apostrof in gemengde contexten

Wanneer de uitvoer door oudere parsers, XML-processors of e-mailclients verwerkt kan worden, verkies de numerieke ' boven de genoemde &apos; voor het enkele aanhalingsteken. De numerieke vorm wordt overal begrepen; de genoemde niet, en een verdwaalde letterlijke "&apos;" in weergegeven tekst is een veelvoorkomende, vermijdbare fout.

Veelgestelde vragen