What Is URL Encoding?

URL encoding (also called percent-encoding) is the process of replacing unsafe characters in a URL with a % followed by two hexadecimal digits representing the character's UTF-8 byte value.

URLs can only contain a subset of ASCII characters safely. Characters outside that set — spaces, special symbols, non-Latin letters, emoji — must be encoded before inclusion in a URL.

Why URLs Need Encoding

A URL has a defined structure:

scheme://host/path?query=value&key=value#fragment

Characters like ?, =, &, /, and # have specific structural meanings. If these appear in a query value, they break the URL parser. Encoding converts them to an unambiguous representation.

How Percent-Encoding Works

Each unsafe character is replaced by %XX where XX is its UTF-8 hex code:

Character	Encoded
Space	%20 (or + in form data)
!	%21
#	%23
&	%26
=	%3D
?	%3F
/	%2F
@	%40

Multi-byte characters:

€ (U+20AC) → UTF-8 bytes: E2 82 AC → %E2%82%AC

Safe vs Unsafe Characters

Always safe in URLs (never encoded):

A–Z  a–z  0–9  -  _  .  ~

Reserved characters (have structural meaning; encode if used as data):

!  #  $  &  '  (  )  *  +  ,  /  :  ;  =  ?  @  [  ]

Unreserved in some contexts (safe to leave but encoding is valid):

-  _  .  ~

encodeURI vs encodeURIComponent

JavaScript provides two functions for URL encoding:

Function	What it encodes	What it leaves alone	Use case
encodeURI()	Unsafe characters only	Reserved characters (:/?#[]@!$&'()*+,;=)	Full URL
encodeURIComponent()	Unsafe + reserved characters	- _ . ! ~ * ' ( )	Query string values

Example:

const url = "https://example.com/search?q=hello world&lang=en";

encodeURI(url)
// "https://example.com/search?q=hello%20world&lang=en"
// ✓ Correct — space encoded, & and = left intact

encodeURIComponent(url)
// "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den"
// ✗ Wrong for full URL — structural characters destroyed

Rule: Use encodeURIComponent for individual query parameter values; use encodeURI for a complete URL.

Common URL Encoding Scenarios

1. Search queries: ?q=C%2B%2B+tutorial — C++ encoded as C%2B%2B
2. Email in query string: ?email=user%40example.com
3. File paths: /files/my%20document.pdf
4. API parameters with special chars: ?filter=price%3E100 (price > 100)

Form Data vs URL Encoding

HTML forms with method="POST" and enctype="application/x-www-form-urlencoded" use a variant:

• Spaces → + (not %20)
• Other characters → percent-encoded

This is different from standard percent-encoding and is only valid in form bodies, not URL paths.

Use the URL Encoder/Decoder to encode or decode any URL or query string value instantly.