URL-codering en -decodering uitgelegd voor ontwikkelaars
Typ een spatie in een URL, of een Cyrillisch woord, of een ampersand die bij je data hoort in plaats van bij het adres zelf, en er moet iets wijken. Het web garandeert alleen veilig transport voor een kleine, voorspelbare set ASCII-tekens. Alles andere moet worden verpakt in een formaat waar routers, servers en browsers het allemaal over eens zijn. Dat formaat is procentcodering, vaker URL-codering genoemd, en op deze pagina kun je tekst in beide richtingen converteren, direct in je browser.
Wat procentcodering feitelijk is
De regel is mechanisch en eenvoudig te volgen. Elk teken dat niet letterlijk kan verschijnen, wordt vervangen door een %-teken gevolgd door twee hexadecimale cijfers die de bytewaarde van dat teken aangeven. Een spatie wordt %20. Een plusteken wordt %2B. Het hekje wordt %23. Wanneer een teken meerdere bytes nodig heeft, zoals de meeste niet-ASCII-tekst onder UTF-8, krijg je simpelweg meerdere drietallen achter elkaar: het euro-teken wordt %E2%82%AC. Decoderen keert het proces om en leest elk drietal terug naar zijn oorspronkelijke byte.
Deze conventie is gedefinieerd in de URI-specificatie (RFC 3986) en is bewust saai. Saai is het punt. Elke goed-opgevoede HTTP-client en -server op de planeet implementeert dezelfde regels, zodat een correct gecodeerde link op de ene plek overal elders intact aankomt.
Waarom het moet bestaan
URL's bevatten twee soorten tekens met heel verschillende taken. Gereserveerde tekens zoals /, ?, #, &, = en : zijn structureel. Ze vertellen een parser waar het pad eindigt en de querystring begint, of waar de ene parameter ophoudt en de volgende begint. Als je feitelijke data een van deze symbolen bevat, moet die worden gecodeerd zodat de parser hem niet aanziet voor leestekens. Een orderreferentie zoals A&B/2024 die rauw in een querystring terechtkomt, wordt misgelezen als twee parameters en een padsegment.
Dan zijn er onveilige en niet-ASCII-tekens: spaties, aanhalingstekens, hoekhaakjes, tekens met accenten, emoji, alles buiten het gewone ASCII-bereik. Deze hebben niets te zoeken in een URL, ofwel omdat ze tijdens overdracht beschadigd raken, ofwel omdat ze geen gedefinieerde representatie hebben. Ze coderen houdt links schoon en voorspelbaar in plaats van de uitkomst aan het toeval over te laten.
Waar je het in de praktijk tegenkomt
Querystrings zijn het klassieke geval. Elke waarde die je aan ?sleutel=... toevoegt, moet worden gecodeerd zodat gebruikersinvoer de structuur niet kan breken. Hetzelfde geldt voor HTML-formulierinzendingen verzonden als application/x-www-form-urlencoded, waarbij de browser veldwaarden automatisch codeert (en, naar historische gewoonte, spaties omzet in + in plaats van %20). Je komt het ook tegen bij het bouwen van links naar pagina's met niet-Latijnse titels, bij het handmatig opbouwen van API-verzoeken, bij het doorgeven van omleidingsdoelen als parameters, en bij het debuggen van waarom een verzoek dat er goed uitziet in de adresbalk verminkt aankomt bij de server.
encodeURI vergeleken met encodeURIComponent
JavaScript heeft twee encoders, en de verkeerde kiezen is een veelvoorkomende fout. Het verschil zit in de reikwijdte. encodeURIComponent is bedoeld voor één enkel stuk data, zoals één querywaarde. Het codeert bijna alles, inclusief de gereserveerde tekens /, ?, :, @, &, =, + en #. Dat is precies wat je wilt wanneer de data deze symbolen als gewone tekst mag bevatten.
encodeURI is bedoeld voor een volledig adres dat je wilt laten werken. Het laat de structurele tekens ongemoeid, zodat de schuine strepen, dubbele punten en vraagtekens die de URL bij elkaar houden, overleven. Gebruik het wanneer je een volledige URL hebt en alleen spaties of niet-ASCII-tekens wilt opschonen; grijp naar encodeURIComponent wanneer je een waarde in een grotere URL invoegt. Een eenvoudige vuistregel: codeer de hele link met encodeURI, codeer de onderdelen die je erin stopt met encodeURIComponent.
Alles blijft op je eigen machine
Dit tool draait volledig in je browser. Tekst die je plakt, wordt lokaal gecodeerd of gedecodeerd met dezelfde standaardroutines en wordt nooit naar een server gestuurd, waardoor het veilig is voor tokens, ondertekende parameters of alles wat je liever niet over de lijn stuurt. Als je met andere teksttransformaties werkt, staat de Base64-converter er direct naast, en je kunt de volledige set ontwikkelaarstools verkennen voor meer dagelijkse hulpmiddelen.
Veelgestelde vragen
Wat betekent %20 in een URL?
Het is een gecodeerde spatie. Het spatieteken is niet letterlijk toegestaan in een URL, dus het wordt vervangen door een procentteken en de hexadecimale waarde 20, de bytewaarde van een spatie.
Waarom zie ik soms een plusteken in plaats van %20?
HTML-formulierdata van het type application/x-www-form-urlencoded codeert spaties naar historische gewoonte als een plusteken. In een normaal pad of query wordt een spatie als %20 gecodeerd. Beide decoderen in hun juiste context terug naar een spatie.
Wanneer moet ik encodeURIComponent gebruiken in plaats van encodeURI?
Gebruik encodeURIComponent voor een enkele waarde die je in een URL invoegt, zoals een queryparameter, omdat het ook gereserveerde tekens codeert. Gebruik encodeURI voor een volledig adres wanneer je de schuine strepen, dubbele punten en vraagtekens wilt behouden die het bij elkaar houden.
Verandert URL-codering de betekenis van mijn data?
Nee. Codering is volledig omkeerbaar. Het decoderen van het resultaat geeft precies de originele tekst terug, byte voor byte, zolang dezelfde tekenset aan beide kanten wordt gebruikt.
Hoe worden niet-ASCII-tekens zoals accenten of emoji verwerkt?
Ze worden eerst omgezet naar UTF-8-bytes, daarna wordt elke byte zijn eigen procentdrietal. Een enkel teken met accent of een emoji kan daardoor uitbreiden tot meerdere drietallen in de gecodeerde uitvoer.
Wordt mijn tekst naar een server gestuurd wanneer ik dit tool gebruik?
Nee. Coderen en decoderen vinden volledig in je browser plaats. Niets wat je plakt wordt geüpload, dus het is veilig te gebruiken met privé of gevoelige strings.