URL Encoder / Decoder

What Is URL Encoding?

URL encoding, also known as percent-encoding, is the mechanism for encoding information in a Uniform Resource Identifier (URI). URLs can only contain a limited set of characters from the US-ASCII character set. Characters outside this set — including spaces, accented letters, and special symbols — must be replaced with a percent sign (%) followed by two hexadecimal digits representing the character's byte value. For example, a space becomes %20, and the ampersand (&) becomes %26. This encoding is defined in RFC 3986, the standard that governs URI syntax.

Why URL Encoding Matters

URL encoding is essential because certain characters have special meanings in URLs. The question mark (?) separates the path from query parameters, the ampersand (&) separates individual parameters, the hash (#) marks a fragment identifier, and the equals sign (=) separates parameter names from values. If your data contains any of these characters, they must be percent-encoded to avoid breaking the URL structure. Without proper encoding, a search query containing & would be misinterpreted as a parameter separator rather than literal text.

encodeURIComponent vs encodeURI

JavaScript provides two URL encoding functions with critical differences. encodeURIComponent() encodes everything except A-Z a-z 0-9 - _ . ! ~ * ' ( ), making it the correct choice for encoding individual query parameter values, form data, or any text that will be embedded within a URL. encodeURI() preserves URL-structural characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; =, making it appropriate for encoding a complete URL where you want to preserve the structure but encode spaces and non-ASCII characters. Using the wrong function is a common source of bugs — use encodeURIComponent for values and encodeURI for complete URLs.

Common Use Cases

• Query string parameters: When building URLs programmatically, always encode parameter values with encodeURIComponent to prevent injection and parsing errors.
• Form submission: HTML forms with method="GET" automatically URL-encode field values using the application/x-www-form-urlencoded format.
• API requests: RESTful APIs require proper encoding of path segments and query parameters, especially when dealing with user-generated content.
• Internationalization: Non-ASCII characters in URLs (like Japanese, Arabic, or emoji) must be UTF-8 encoded and then percent-encoded for compatibility.
• Deep linking: When embedding URLs within other URLs (e.g., redirect URLs), the inner URL must be fully encoded to prevent structural collisions.