Platte tekst

Procentgecodeerd

Wat is de URL-encoder?

Gooi een string in het linker paneel en het rechter paneel toont de procentgecodeerde versie. Onder de motorkap draait encodeURIComponent, dat elk teken escapet dat een speciale betekenis in een URL heeft — spaties worden %20, ampersands worden %26, het apenstaartje wordt %40, enzovoort. Dit is de codering die je wilt voor query-parameter-WAARDEN, padsegmenten en overal waar een ruwe string mee moet rijden in een URL zonder hem te breken.

Er zijn twee codeer-smaken en het verschil doet ertoe. encodeURIComponent (deze pagina) escapet alles wat speciaal is, inclusief ?, #, &, = en / — want op waarde-niveau zouden die tekens de betekenis van de URL veranderen. encodeURI is permissiever en laat die structurele tekens met rust, omdat het verwacht dat je een al volledig gevormde URL aan het coderen bent. MDN heeft de tabel met gereserveerde tekens als je de details nodig hebt. Als je een hele URL uit onderdelen bouwt, wil je de URL Builder, niet deze pagina.

De eigenlijke codeerregel komt uit RFC 3986 §2.1: elke onveilige byte wordt geschreven als % gevolgd door twee hex-cijfers van zijn UTF-8-bytes. Daarom levert een emoji als de raket vier procent-tripletten op (het zijn vier UTF-8-bytes), terwijl een ASCII zoals ! bij één blijft. De WHATWG URL-standaard formaliseert hoe moderne browsers dit doen, en het Wikipedia-artikel over procentcodering heeft een nette referentietabel als je met de hand wilt natrekken. Alles gebeurt in je browser. Niets wordt geüpload, niets wordt gelogd.

Zo gebruik je de URL-encoder

Drie stappen. De pagina werkt mee tijdens het typen — geen Converteer-knop.

Plak je string of klik op Voorbeeld

Typ of plak willekeurige tekst in het linker paneel. Klik op Voorbeeld om een string te laden met het soort tekens dat je in de praktijk tegenkomt — spaties, ampersands, een e-mail, een procentteken. Voorbeeld-invoer:

Ava Chen & friends? [email protected]  100% off!

Unicode en emoji werken prima — de encoder gebruikt UTF-8-byte-sequenties, dus een Japanse naam of een emoji codeert naar een multibyte procent-sequentie en gaat zonder verlies heen en terug door elke standaardconforme decoder.

Lees de gecodeerde uitvoer

Het rechter paneel toont de procentgecodeerde versie. Spaties worden %20, & wordt %26, ? wordt %3F, @ wordt %40, en % zelf wordt %25. Werkt mee tijdens het typen.

Kopieer of download

Klik op Kopiëren om de gecodeerde string op je klembord te zetten, of op Downloaden om hem als .txt-bestand op te slaan. Gebruik Wissen op het invoerpaneel om opnieuw te beginnen. Voor de andere kant op spring je naar de URL-decoder.

Wanneer je dit echt zou gebruiken

Een query-string-waarde met de hand bouwen

Moet je ?customer=Ava%20Chen&status=active in elkaar zetten voor een snelle curl-test of een deep link? Codeer hier elke waarde en plak 'm in je URL. Vergeten een waarde met een & erin (een klantnaam als "Smith & Co.") te coderen is een klassieke bron van mysterieuze "de API ziet maar de helft van mijn parameter"-bugs.

Een redirect-URL coderen

OAuth-flows en SSO-redirects geven de bestemmings-URL door binnen een query-parameter (bijv. ?return_to=...). Die bestemmings-URL bevat zelf :, /, ?, & — die allemaal procentgecodeerd moeten zijn zodat de buitenste URL goed gevormd blijft. RFC 6749 §3.1.2 noemt dit expliciet voor OAuth-redirect-URI's.

Een padsegment met een slash erin coderen

Als je REST-API routes heeft als /repos/:owner/:name en de naam toevallig een slash bevat (zeldzaam, maar legaal in sommige catalogi), moet de slash naar %2F gecodeerd worden of de router behandelt hem als padscheidingsteken. Zelfde logica voor bestandsnamen met spaties of accenten in download-URLs.

Gebruikersinvoer schoonmaken voordat hij een URL raakt

Elke string die vanuit een HTML-formulier, een zoekvak of een CSV-import in een URL belandt, moet gecodeerd worden. Ongecodeerde gebruikersinvoer is precies hoe je eindigt met kapotte links, parameter-injection-vectoren, of URLs die werken voor ASCII-gebruikers en stilletjes falen voor iedereen anders. OWASP's notities over path traversal herinneren je goed aan wat het kost om deze stap over te slaan.

Veelgestelde vragen

Moet ik encodeURIComponent of encodeURI gebruiken?

Bijna altijd encodeURIComponent — dat is wat deze pagina gebruikt. Het is de juiste keuze voor query-parameter-waarden, padsegmenten en overal waar een string een "stuk" van een URL moet zijn. encodeURI is om een URL te coderen die structureel al volledig is (zeldzaam in de praktijk — meestal bouw je vanuit onderdelen). De MDN-referentie hierboven heeft de complete tabel van welke tekens elk van beide escapet.

Waarom wordt + soms gebruikt voor spaties en soms %20?

Twee codeertradities leven naast elkaar. application/x-www-form-urlencoded (de ?sleutel=waarde-body van een HTML-formulier-submit) gebruikt + voor spatie. De algemene URL-procentcodering uit RFC 3986 gebruikt %20. encodeURIComponent produceert altijd %20. De meeste servers accepteren beide, maar als je downstream-decoder strikt is in form-modus, vervang dan met .replace(/%20/g, "+") na het coderen.

Gaat hij goed om met emoji en niet-ASCII-tekst?

Ja. De encoder serialiseert de invoer eerst als UTF-8 en codeert daarna elke byte procentgecodeerd. Een emoji wordt dus een multibyte procent-sequentie, en elke standaardconforme decoder krijgt het netjes terug. Als je integreert met een systeem dat Latin-1 of een andere legacy-codering gebruikt, heb je een ander probleem — verander het bovenliggende systeem, schrijf geen niet-UTF-8-encoder met de hand.

Welke tekens codeert encodeURIComponent NIET?

De letters A-Z en a-z, de cijfers 0-9, en de niet-gereserveerde tekens - _ . ! ~ * ' ( ). Al het andere wordt procentgecodeerd. De lijst komt direct uit de oorspronkelijke spec en ligt vast in elke moderne JavaScript-engine — zie de ECMAScript-spec voor encodeURIComponent als je hoofdstuk en vers wilt.

Wordt de invoer die ik hier plak ergens naartoe gestuurd?

Nee. Het coderen draait volledig in je browser via de JavaScript-engine. Geen netwerkverzoek, geen server, geen log. Plak secrets, tokens, alles wat gevoelig is — het verlaat je machine niet.

Hoe groot mag de string zijn die ik hier codeer?

Er zit een limiet van 256 KB op de invoer. Echte URL-waarden zijn maximaal een paar kilobyte. Als je meerdere MB aan data moet coderen, probeer je vrijwel zeker een payload in een URL te stoppen terwijl je een body zou moeten POSTen — codeer hem server-side en sla de heen-en-weer over.

Andere URL- en codeer-tools

Coderen is één bewerking. Dit past er natuurlijk bij: