URL Encoder, Decoder and Parser

What this tool does

A URL may contain only a limited set of characters, and some of them separate its parts. Everything else is written as a percent sign followed by two hexadecimal digits for each byte. This is called percent-encoding.

The tool has four actions: encode a component, encode a whole URL, decode, and split a URL into scheme, host, port, path, query and fragment with a list of the decoded query parameters.

How to use it

1. Choose the action.
2. Type or paste the text or the URL.
3. When decoding text that comes from a form or a query string, turn on “Treat + as a space when decoding”.
4. Read the result, which appears while you type, and copy it.

Use “Encode a component, such as a query value” for a single value that you put into a URL, such as a search term or a file name. Use “Encode a whole URL” for a complete address that contains spaces or letters outside ASCII; it leaves the characters that structure the URL untouched.

How the result is derived

For encoding the tool uses the functions of the browser. A character that must be encoded is converted to its UTF-8 bytes, and each byte is written as a percent sign and two upper-case hexadecimal digits.

For decoding the tool reads every escape sequence itself, collects the bytes and checks that they are valid UTF-8. If an escape is incomplete or the bytes are not UTF-8, it reports the position and selects the sequence in the input field. The function built into browsers only reports that the text is malformed.

Splitting uses the URL parser of the browser, which follows the URL standard of the WHATWG. Query parameters are decoded as form data, so a + becomes a space.

Worked example

You want to search for “café & bar” on a site whose search page takes the term in the parameter q.

Input:   café & bar
Result:  caf%C3%A9%20%26%20bar
URL:     https://example.com/search?q=caf%C3%A9%20%26%20bar

The letter é is the two bytes C3 A9 in UTF-8, the space is the byte 20 and the ampersand is 26. Without encoding, the ampersand would end the parameter q and start a new parameter named “ bar”.

Splitting the finished URL shows the scheme https, the host example.com, the path /search, the query and one parameter: q with the value café & bar.

Reference: characters in a URL

A reserved character must be encoded when it is data and not a separator. That is why a value needs the stricter encoding of a component.

Hexadecimal digits in escapes may be upper or lower case; %c3 and %C3 mean the same byte. The standard recommends upper case when producing URLs.

The space has two spellings. Percent-encoding writes %20. The format for form data, application/x-www-form-urlencoded, writes +, and a real plus sign there is written %2B. Query strings created by HTML forms use the second convention, paths never do.

Common mistakes

• Encoding a whole URL as a component. The colon and the slashes are encoded too, and the result is no longer a URL.
• Encoding twice. The percent sign of the first pass becomes %25, so %20 turns into %2520.
• Decoding + as a space in a path, or not decoding it in form data.
• Decoding text that was encoded with another character set. caf%E9 is “café” in Latin-1 but not valid UTF-8; the tool reports the position of the byte.
• Writing a literal percent sign. In a URL it must be %25.

Sources

• RFC 3986: Uniform Resource Identifier (URI): Generic Syntax
• WHATWG URL Standard
• MDN: encodeURIComponent()