URL encoder and decoder for one text box
Paste a link into the box, press one button, and the same box shows the result. This URL encoder and decoder turns spaces, umlauts and reserved characters into percent codes, such as %20 for a space or %C3%BC for "ü", and turns them back. A table under the box lists the query parameters of whatever text is in it.
The box starts with a sample search link. Edit it or replace it with your own text.
The five buttons in order
- Paste a URL, a bare query string or any text. The table below the box refreshes on every keystroke.
- encodeURIComponent is for one value. It also escapes
/ ? : @ & = + $ # ,, so the value cannot break the link around it. - encodeURI (full URL) is for a whole address. It leaves those characters alone and the link keeps working.
- decodeURI turns percent codes back into readable text.
- Copy current URL copies the box, not the table. Clear empties the box.
When an inner URL breaks the outer one
An OAuth login link carries its own return address in redirect_uri. Paste that inner address as it is, and the first & ends the parameter early. Run the inner address through encodeURIComponent first, then add it to the outer link.
The other direction is just as common. A server log shows q=caf%C3%A9+au+lait, and you need to know what the customer typed. Paste the line and press decodeURI.
Tracking links are the third case. Twelve utm_ parameters are a wall of text on one line. In the table they are twelve short rows.
Plus signs, bad percent codes and double encoding
- Decoding first replaces every
+with a space and only then resolves the%XXcodes. A literal plus in a path becomes a space.%2Bstays a plus. - A
%without two hex digits after it makes decoding fail. The box keeps its text and shows no error. - Encoding twice turns
%20into%2520. - Decoding a full address also resolves
%26and%3D. The structure of the query can change.
The table reads addresses that start with http:// or https://. Any other text counts as a query string, with or without a leading ?. It shows decoded values, so q=web+tools appears as "web tools". A fragment after # is not listed, a repeated key gets one row per value, and text that cannot be parsed gives a short notice instead of a table.
Pasted links are not sent anywhere
Encoding, decoding and the table run in your browser. A button press sends no request, and the network panel of your developer tools shows it. Only the copy button touches the clipboard, and only when you press it.
Frequently asked questions (FAQ)
encodeURI leaves characters such as :/?#&= as they are, so a whole URL keeps working. encodeURIComponent escapes them, which is what you want for a single parameter value.