How to URL Encode Text: encodeURI vs encodeURIComponent

Step-by-step

1. Decide what you are encoding: a whole URL, or a single value that goes inside a query string.
2. For a whole URL, use Encode URL. It keeps characters such as / ? & = # that give the URL its structure.
3. For one value, such as a search term or a redirect address, use Encode Component. It also encodes / ? & = # + and :.
4. Paste your text, choose the option and copy the result.
5. Test the final link in a browser and check that the receiving page reads the value correctly.

Two functions, two jobs

Encode URL uses JavaScript's encodeURI, which leaves the characters that structure a URL alone. Encode Component uses encodeURIComponent, which encodes almost everything except letters, digits and - _ . ! ~ * ' ( ).

Example: the value a b&c=d/e?f#g+h becomes a%20b%26c%3Dd%2Fe%3Ff%23g%2Bh with Encode Component. Encoding a whole address such as https://x.com/a b?q=a&b=c#h with Encode URL gives https://x.com/a%20b?q=a&b=c#h.

The ampersand problem

If a query value contains &, encoding it as a whole URL leaves the & in place, and the server reads it as the start of a new parameter. Always encode each value separately with Encode Component, then join the parameters.

Spaces: %20 or +

In a URL path, a space is %20. In form-style query strings, + can also mean a space. A literal plus sign in a value should be encoded as %2B so it is not read as a space.