How to encode and decode special characters in URLs
Table of Contents
Recommended basics: Articles you should know
To get the full picture of this article, you should know about this topics:
Did you ever see something like %20 in some URL and wonder what it means? In this article we will dig
deeper into url encoding and url decoding to get a better understanding.
Deciphering the % Symbol in URLs #
URLs do have a format, but some of the dynamic values could conflict with the format. To prevent that, these
values can be replaced so there is no conflict. This replacements start with a % sign. The official term is
percent-encoding.
What is encoding? #
Encoding describes the process of replacing conflicting characters in some value so the value can be used in some URLs.
For better understanding, let’s have some examples of characters to be replaced:
| Character to replace | Replaced with |
|---|---|
| % | %25 |
| @ | %40 |
| = | %3D |
| " | %22 |
| (whitespace) | %20 |
This list is just an example, there’s more values that would be replaced.
What is decoding? #
Decoding describes the process of “reverting” the encoding of values from an URLs so they can be read again.
For better understanding, let’s have some examples and see how it would be translated back:
| Replaced value | Replaced back to |
|---|---|
| %25 | % |
| %40 | @ |
| %3D | = |
| %22 | " |
| %20 | (whitespace) |
This list is just an example, there’s more values that would be replaced.
Examples of url encoded values #
Let’s pretend you need an url with a query parameter of different type of information (e.g.
https://reliable.codes?value=...), here’s a small showcase how this URL would look like.
E-Mail addresses #
In E-Mail addresses you most likely just need to replace @ with %40, so the value info@reliable.codes would
encode to info%40reliable.codes.
In this case our URL would look like this: https://reliable.codes?value=info%40reliable.codes.
Date / Time #
Date and time formatting is more complex than it seems. For this example, I’ll use
ISO 8601 so 12th of April 2024 01:00 AM at UTC would be represented as
2024-04-12T01:00+00:00. Two characters need to be encoded here: + and :. The value would encode to
2024-04-12T01%3A00%2B00%3A00.
In this case our URL would look like this: https://reliable.codes?value=2024-04-12T01%3A00%2B00%3A00.
URLs #
Let’s say we want to have https://reliable.codes as a value. We need to encode : and /, so the encoded value
would look like https%3A%2F%2Freliable.codes.
In this case our URL would look like this: https://reliable.codes?value=https%3A%2F%2Freliable.codes.