HTML Escape / Unescape

Wat is HTML-escaping?

HTML-escaping is het proces waarbij tekens met een speciale betekenis in HTML worden vervangen door de bijbehorende entiteitsreferenties. De vijf tekens die altijd geëscapet moeten worden zijn het ampersand (&), kleiner-dan (<), groter-dan (>), dubbel aanhalingsteken (") en enkel aanhalingsteken ('). Zonder escaping interpreteert de browser deze tekens als opmaaksinstructies in plaats van weer te geven tekst, waardoor de paginaopmaak breekt en de deur wordt opengezet voor injectieaanvallen.

De HTML-specificatie (beheerd door WHATWG) definieert twee vormen van tekstreferenties: benoemde entiteiten zoals &amp; en numerieke entiteiten zoals &#38; of &#x26;. Benoemde entiteiten zijn makkelijker leesbaar in broncode. Numerieke entiteiten (decimaal of hexadecimaal) kunnen elk Unicode-codepunt representeren, wat ze nuttig maakt voor tekens zonder een benoemde alias. Beide vormen produceren identieke uitvoer in de browser.

Unescaping (ook wel decoderen genoemd) is de omgekeerde bewerking: het terugzetten van entiteitsreferenties naar hun letterlijke tekens. Dit is gebruikelijk bij het extraheren van tekst uit HTML-broncode, het migreren van inhoud tussen systemen, of het debuggen van sjablonen die entiteiten dubbel coderen. Dit hulpmiddel verwerkt beide richtingen in de browser, zodat u uw escapinglogica kunt verifiëren of in seconden platte tekst kunt herstellen uit een HTML-zware bron.

Waarom een HTML-escapetool gebruiken?

Het handmatig vervangen van punthaken en ampersands in grote tekstblokken is omslachtig en foutgevoelig. Een speciaal hulpmiddel converteert uw invoer in één stap zonder installatie.

Toepassingen van HTML Escape

HTML-entiteitsreferentietabel

De onderstaande tabel toont veelgebruikte HTML-entiteiten. De vijf speciale tekens (& < > " ') moeten altijd worden geëscapet in HTML-inhoud en attribuutwaarden. Andere entiteiten zijn optioneel maar nuttig voor tekens die moeilijk te typen of ambigu zijn in broncode.

Escapen vs. unescapen: wanneer welke gebruiken

De twee bewerkingen zijn elkaars inverse. De verkeerde richting kiezen leidt tot dubbel gecodeerde of onbeveiligde uitvoer.

Codevoorbeelden

Hieronder staan werkende voorbeelden van HTML-escaping en unescaping in vier talen. Elk fragment dekt beide richtingen en verwerkt randgevallen zoals geneste aanhalingstekens en numerieke entiteiten.

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

Veelgestelde vragen