URL decoderen en encoderen online

Wat is URL-encoding (percent-encoding)?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Functies

Voorbeelden

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

Zo gebruik je het

1. 1

   Voer een URL of geëncodeerde string in

   Plak een URL in het gedecodeerde vak om hem te encoderen, of plak een percent-geëncodeerde string in het geëncodeerde vak om hem te decoderen. Kies de encodeURI- of encodeURIComponent-modus op basis van je gebruikssituatie.

2. 2

   Bekijk de resultaten en de URL-structuur

   Het andere vak wordt direct bijgewerkt terwijl je typt. De URL-parser verdeelt de URL in protocol, host, poort, pad, queryparameters en fragment — allemaal bewerkbaar.

3. 3

   Kopiëren of opnieuw opbouwen

   Klik op Kopiëren om het geëncodeerde of gedecodeerde resultaat te kopiëren. Bewerk afzonderlijke URL-onderdelen en klik op Opnieuw opbouwen om een nieuwe URL samen te stellen uit de gewijzigde onderdelen.

Veelgemaakte fouten

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Veelvoorkomende toepassingen

Onleesbare URL's debuggen

Decodeer percent-geëncodeerde URL's uit serverlogs, foutmeldingen of de browser-developer tools om de oorspronkelijke leesbare tekst te lezen.

API-ontwikkeling

Encodeer queryparameterwaarden voor REST API-aanroepen, zodat speciale tekens zoals &, = en spaties de verzoek-URL niet breken.

OAuth-stroom instellen

Encodeer redirect_uri en andere URL-parameters in OAuth-autorisatie-URL's correct om authenticatiefouten te voorkomen.

Geïnternationaliseerde URL's

Encodeer en decodeer URL's met Chinese, Japanse, Koreaanse, Arabische of andere niet-ASCII-tekens voor geïnternationaliseerde webapplicaties.

Marketing-linkanalyse

Decodeer tracking-URL's uit e-mailcampagnes en advertentieplatforms om de ingesloten UTM-parameters en omleidingsketens te begrijpen.

URL-structuurinspectie

Verwerk complexe URL's naar hun samenstellende delen — protocol, host, poort, pad, queryparameters en fragment — voor analyse en aanpassing.

Technische details

RFC 3986 gereserveerde en onbereikbare tekens

RFC 3986 definieert onbereikbare tekens (A-Z, a-z, 0-9, -, ., _, ~) die nooit geëncodeerd hoeven te worden, en gereserveerde tekens (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) die als URI-scheidingstekens dienen en percent-geëncodeerd moeten worden wanneer ze als data worden gebruikt.

UTF-8-byte-encoderingsproces

Niet-ASCII-tekens worden eerst omgezet naar hun Unicode-codepunt, vervolgens geëncodeerd als UTF-8-bytes (1-4 bytes afhankelijk van het codepuntbereik), en tot slot wordt elke byte als %XX percent-geëncodeerd. Bijvoorbeeld: é (U+00E9) → UTF-8-bytes C3 A9 → %C3%A9. De emoji 🎉 (U+1F389) → UTF-8-bytes F0 9F 8E 89 → %F0%9F%8E%89.

URL versus URI-terminologie

Een URI (Uniform Resource Identifier) is de overkoepelende term voor elke identifier-string. Een URL (Uniform Resource Locator) is een URI die ook het toegangsmechanisme specificeert (zoals https://). De encoderingsregels in RFC 3986 zijn op alle URI's van toepassing. De JavaScript-API gebruikt de URI-terminologie (encodeURI, decodeURI), terwijl het dagelijkse gebruik de voorkeur geeft aan URL.

Best practices

Gebruik de juiste modus voor de situatie

Gebruik encodeURIComponent() voor afzonderlijke queryparametersleutels en -waarden. Gebruik encodeURI() alleen wanneer je een volledige URL hebt en onveilige tekens wilt encoderen zonder de structuur te breken. Gebruik nooit encodeURI() op parameterwaarden die &, = of andere gereserveerde tekens kunnen bevatten.

Vermijd dubbele encoding

Controleer vóór het encoderen van een string of deze al geëncodeerd is. Kijk naar bestaande %-sequenties. Een al-geëncodeerde string opnieuw encoderen verandert %20 in %2520, %3D in %253D, enzovoort. Als je het niet zeker weet, decodeer dan eerst en encodeer daarna eenmalig.

Decodeer aan de serverzijde

De meeste webframeworks decoderen URL-parameters automatisch voordat je applicatiecode ze verwerkt. Vermijd het handmatig decoderen van parameters die je framework al heeft gedecodeerd — dit kan problemen veroorzaken als de oorspronkelijke waarde letterlijke procentsequenties bevatte.

Encodeer waarden voor OAuth en API-ondertekening

OAuth 1.0-handtekeningbasisstrings en veel API-ondertekeningsalgoritmen vereisen strikte RFC 3986-percent-encoding. Gebruik encodeURIComponent() en vervang daarna eventuele resterende tekens die het niet encodeert (zoals !, ', (, ), *) door hun percent-geëncodeerde equivalenten als de specificatie dat vereist.

Veelgestelde vragen