URL Encoding Explained: When, Why, and How to Encode URLs
A clear guide to percent-encoding — what it is, when you need it, and how to encode and decode URL strings for free in your browser.
If you’ve ever seen %20 in a URL where a space should be, you’ve seen percent-encoding in action. It’s one of those things developers use daily without always understanding when and why it’s required. Here’s the complete picture.
What is URL encoding?
URLs can only contain a limited set of ASCII characters. Spaces, ampersands, equal signs, slashes, and non-ASCII characters (like ü, 中, or 😀) are not valid in raw URLs. Percent-encoding converts these characters into a safe format: % followed by the two-digit hexadecimal code of the byte.
Examples:
- Space →
%20 &→%26=→%3D/→%2Fü(U+00FC) →%C3%BC(UTF-8 encoded, two bytes)- 😀 (U+1F600) →
%F0%9F%98%80(four bytes)
encodeURI vs encodeURIComponent
This is the distinction that trips up most developers.
encodeURI encodes a complete URL. It leaves structural characters like ?, &, =, /, # intact because they’re meaningful URL syntax.
encodeURI("https://example.com/search?q=hello world")
→ "https://example.com/search?q=hello%20world"
encodeURIComponent encodes a single component — a query parameter value, a path segment, a fragment. It also encodes ?, &, =, and / because within a component those characters have no special meaning and would break the URL structure.
encodeURIComponent("hello & goodbye")
→ "hello%20%26%20goodbye"
Rule of thumb: use encodeURIComponent when encoding values you’re embedding into a URL. Use encodeURI only when you’ve assembled the full URL and want to make it safe as a whole.
Our URL Encoder uses encodeURIComponent by default, which is correct for the most common use case: encoding a query string value.
When URL encoding is required
- Query string values:
?q=hello worldmust be?q=hello%20worldor?q=hello+world(the+convention is older and specific to HTML form encoding). - Path segments containing special characters: a file named
report 2026 Q1.pdfin a URL must bereport%202026%20Q1.pdf. - API calls with complex values: embedding a URL as a query parameter requires encoding the inner URL completely:
?redirect=https%3A%2F%2Fexample.com%2Fpath. - Bookmarklets and
javascript:URLs: any dynamic value must be encoded before insertion.
When NOT to encode
Do not encode the structural parts of a URL: https://, ?, &, =, / (between path segments), #. Encoding these characters breaks the URL.
Debugging encoded URLs
When you receive a URL like https://api.example.com/search?q=hello%20world%20%26%20goodbye, decode it to read the original query: hello world & goodbye. Our URL Decoder does this in one click.
Try the URL Encoder & Decoder — encode or decode any string instantly, for free, with no data leaving your device.