Over deze tool
Deze gratis URL-encoder / -decoder codeert tekst met procenttekens zodat die veilig in een URL of query string gebruikt kan worden, en zet een gecodeerde URL weer om in leesbare tekst.
Hij gaat correct om met UTF-8, dus letters met accenten, emoji en niet-Latijnse schriften worden zonder beschadiging gecodeerd en gedecodeerd. Alles draait in uw browser — er wordt niets geüpload.
Wat procentcodering is
Een URL mag maar een kleine set tekens bevatten. Al het andere — spaties, aanhalingstekens, &, #, ?, letters met accenten, alles in het Chinees of Arabisch — moet eerst herschreven worden.
Procentcodering doet dat door een teken te vervangen door een % gevolgd door de bytewaarde in hexadecimale notatie. Een spatie wordt %20. Een ampersand wordt %26. Een vraagteken wordt %3F. Het is hetzelfde idee als Base64 — lastige gegevens veilig maken voor een kieskeurig kanaal — maar dan teken voor teken, zodat het resultaat grotendeels leesbaar blijft.
Omdat er bytes worden gecodeerd, levert een teken dat in UTF-8 meer dan één byte kost ook meer dan één escape op. De é bestaat uit twee bytes en wordt %C3%A9. Een Chinees teken kost meestal drie bytes en wordt drie escapes. Een emoji kost er vier. Daarom zien gecodeerde URL's met niet-Engelse tekst er zo lang uit.
Waarom dit uitmaakt: het `&`-probleem
Dit is de fout die deze tool moet voorkomen, en bijna iedereen maakt hem een keer.
Een query string scheidt zijn waarden met & en =:
/zoeken?q=koffie&pagina=2
Stel nu dat iemand zoekt op Bed & Breakfast. Ruw ingevoegd:
/zoeken?q=Bed & Breakfast&pagina=2
De server ziet nu drie parameters — q is Bed , dan een onzinnige parameter Breakfast, dan pagina. De zoekopdracht geeft stilzwijgend het verkeerde terug. Codeer de waarde eerst en het werkt wel:
/zoeken?q=Bed%20%26%20Breakfast&pagina=2
Daaruit volgt de regel: codeer elke waarde, niet de hele URL. De & en de = die de query string structureren moeten ruw blijven. De & binnen een waarde niet.
Een waarde coderen of een hele URL
Dit is het onderscheid waar mensen over struikelen, en de reden dat er in JavaScript twee verschillende functies bestaan.
encodeURIComponent codeert vrijwel alles, ook /, ?, #, & en =. Gebruik die voor één onderdeel van een URL: een zoekterm, een bestandsnaam, een doorstuurbestemming, een token. Dat is meestal wat u wilt, en dat is wat deze tool doet.
encodeURI laat de structurele tekens met rust, omdat die ervan uitgaat dat u een volledige, al kloppende URL aanlevert waarvan alleen de ongeldige tekens opgeschoond moeten worden. Gebruik die op een hele URL, nooit op een losse waarde.
Codeert u een hele URL met de component-variant, dan wordt elke / een %2F en werkt het adres niet meer. Codeert u een waarde met de URI-variant, dan glipt uw & erdoorheen en breekt de query string. Weten welke u bedoelde is de hele truc.
Niet hetzelfde als HTML-escaping
Procentcodering en HTML-escaping lijken op elkaar en lossen verschillende problemen op.
Procentcodering (%20, %26) maakt tekst veilig binnen een URL. HTML-escaping (&, <) maakt tekst veilig binnen een HTML-document. Een URL die op een pagina wordt afgedrukt heeft soms beide nodig, in die volgorde: eerst coderen voor de URL, dan het resultaat escapen voor de HTML.
En een bekende eigenaardigheid: + betekent soms een spatie. Dat is een overblijfsel van HTML-formulieren, waar application/x-www-form-urlencoded een + gebruikt in plaats van %20. De meeste servers accepteren beide in een query string, maar een + in een pad betekent een echt plusteken. Duikt er een spatie op als + waar u dat niet verwachtte, dan is een formulier-encoder de reden.
Zo gebruikt u het
- Plak uw tekst of URL in het veld
- Codeer of Decodeer met de knoppen
- Wissel om het resultaat terug in de invoer te zetten
- Kopieer het resultaat
Goed om te weten
- Codeer waarden, geen hele URL's. Een compleet adres door een encoder halen maakt van elke / een %2F en breekt het.
- Codeer nooit twee keer. Een % wordt zelf gecodeerd als %25, dus een tweede ronde maakt van %20 een %2520 en de spatie is weg. Dit is de meest voorkomende oorzaak van een raadselachtig kapotte link.
- Gereserveerde tekens dragen betekenis — waaronder :, /, ?, #, @, &, =, + en $. Ze mogen in een URL staan, maar moeten gecodeerd worden als ze binnen een waarde voorkomen.
- Niet-gereserveerde tekens worden nooit gecodeerd: A–Z, a–z, 0–9, -, _, . en ~.
- Hoofdletters in de hex maken niet uit. %3f en %3F zijn hetzelfde; hoofdletters zijn de conventie.
- Een losse % is ongeldig. Mislukt het decoderen, zoek dan naar een % die niet gevolgd wordt door twee hexadecimale cijfers — vaak een teken dat de tekenreeks is afgekapt.
Veelgestelde vragen
Wat betekent %20 in een URL?
Het is een spatie. Een spatie mag niet in een URL staan en wordt daarom met procenttekens gecodeerd als %20: een % gevolgd door 20, de hexadecimale bytewaarde van een spatie. Soms ziet u een spatie geschreven als +, een erfenis van formuliercodering; beide worden in een query string begrepen, maar alleen %20 is correct in een pad.
Moet ik de hele URL coderen of alleen een deel?
Alleen de delen. Codeer elke waarde die u *in* een URL zet — een zoekterm, een bestandsnaam, een doorstuuradres — en laat de ://, /, ?, & en = die de URL structureren met rust. Een volledige URL coderen maakt van de schuine strepen %2F, waarna hij niet meer werkt.
Waarom is mijn link kapot na het coderen?
Vrijwel altijd door dubbele codering. Het teken % wordt zelf gecodeerd als %25, dus een al gecodeerde tekenreeks nogmaals coderen maakt van %20 een %2520. De decoder geeft u dan een letterlijke %20 terug in plaats van een spatie. Decodeer één keer om te zien wat u werkelijk heeft voordat u opnieuw codeert.
Waarom wordt één letter met accent meerdere %-codes?
Omdat procentcodering met bytes werkt, niet met letters. In UTF-8 kost é twee bytes en wordt het dus %C3%A9. De meeste Chinese, Japanse en Koreaanse tekens kosten er drie en worden drie escapes; emoji kosten er vier. Er is niets mis — zoveel weegt het teken nu eenmaal.
Wat is het verschil tussen URL-codering en HTML-escaping?
Ze beschermen verschillende plekken. URL-codering (%26) maakt tekst veilig binnen een webadres. HTML-escaping (&) maakt tekst veilig binnen een HTML-pagina. Een link die op een pagina wordt afgedrukt kan beide nodig hebben, in die volgorde. De een gebruiken waar de ander hoort laat het oorspronkelijke probleem gewoon staan.
Wordt mijn tekst naar een server gestuurd?
Nee. Coderen en decoderen gebeuren allebei in uw browser, dus niets van wat u plakt verlaat uw apparaat. De tool blijft werken met de verbinding uit.
Gerelateerde tools
- Base64 coderen / decoderen — de andere codering die u voortdurend tegenkomt in tokens en data-URL's
- JSON-formatter — de JSON opschonen en controleren die vaak in die query strings zit
- JWT-decoder — een token lezen dat in een URL aankwam
- E-mails en URL's extraheren — elke link uit een blok tekst halen
