URL Encoder / Decoder

Encode text to URL-safe format or decode URL-encoded strings back to readable text. Supports component and full URL encoding.

Text to Encode

Common URL Encoding Reference

Character	Encoded	Description
	%20	Space
!	%21	Exclamation mark
#	%23	Hash
$	%24	Dollar sign
&	%26	Ampersand
'	%27	Apostrophe
+	%2B	Plus sign
/	%2F	Forward slash
:	%3A	Colon
=	%3D	Equals sign
?	%3F	Question mark
@	%40	At sign

Understanding URL Encoding: A Complete Guide

What Is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism for translating characters into a format that can be safely transmitted within a Uniform Resource Locator (URL). URLs can only be sent over the Internet using the ASCII character set, which means that any characters outside this set — as well as certain reserved characters that have special meaning within URLs — must be converted into a valid ASCII format. URL encoding replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code. For example, a space character becomes %20, and an ampersand (&) becomes %26.

This encoding standard is defined in RFC 3986, which specifies the syntax for Uniform Resource Identifiers (URIs). Without URL encoding, web browsers and servers would be unable to correctly interpret URLs containing special characters, potentially leading to broken links, security vulnerabilities, and data corruption. Every time you submit a form, click a link with query parameters, or interact with a web API, URL encoding is working behind the scenes to ensure your data arrives safely and accurately.

Component Encoding vs. Full URL Encoding

There are two primary approaches to URL encoding, each serving a different purpose. Component encoding, implemented by JavaScript's encodeURIComponent() function, encodes all characters that have special meaning in a URL, including colons, slashes, question marks, ampersands, and hash symbols. This is the correct choice when encoding individual values that will be placed into query string parameters or path segments. For example, if a user searches for "cats & dogs" on your website, the search query should be component-encoded to "cats%20%26%20dogs" before being inserted into the URL.

Full URL encoding, on the other hand, uses JavaScript's encodeURI() function and is designed to encode an entire URL while preserving its structural characters. It leaves colons, slashes, question marks, and hash symbols intact because these characters define the URL's protocol, path, query string, and fragment. Full URL encoding is useful when you have a complete URL that may contain unsafe characters in its path or query values but whose structure should remain valid. Understanding when to use each type is essential for building web applications that handle URLs correctly and avoid common encoding pitfalls.

Why URL Encoding Matters for Web Development

Proper URL encoding is a fundamental skill for web developers, and misunderstanding it leads to some of the most common bugs in web applications. When query parameters contain unencoded special characters, they can alter the structure of the URL itself. An unencoded ampersand in a parameter value, for instance, will be interpreted as a parameter separator, splitting your intended single value into two separate parameters and causing your application to receive incorrect data. Similarly, unencoded spaces can break URL parsing in some browsers and HTTP clients.

Beyond functional correctness, URL encoding plays a vital role in web security. Improper encoding is a contributing factor in several types of attacks, including cross-site scripting (XSS), SQL injection, and open redirect vulnerabilities. Attackers often exploit double-encoding or incomplete encoding to bypass security filters and inject malicious payloads into URLs. By consistently applying proper URL encoding to all user-supplied data that appears in URLs, developers can significantly reduce their application's attack surface. Modern web frameworks typically provide built-in encoding utilities, and developers should always use these rather than implementing their own encoding logic, which is prone to subtle errors.

Common Use Cases and Best Practices

URL encoding is essential in numerous web development scenarios. When building RESTful APIs, all dynamic path segments and query parameters must be properly encoded to handle arbitrary user input. When constructing redirect URLs, encoding ensures that the target URL is passed as a single parameter without breaking the redirect mechanism. In email marketing, encoded URLs within tracking links preserve analytics parameters through multiple redirects. When working with OAuth and authentication flows, proper encoding of callback URLs and state parameters prevents authentication errors and security issues.

Best practices for URL encoding include always encoding user input before inserting it into URLs, using language-provided encoding functions rather than manual string replacement, being aware of double-encoding issues (where already-encoded strings get encoded again, turning %20 into %2520), and testing your application with special characters including international characters, emoji, and control characters. It is also worth noting that the plus sign (+) is sometimes used as an alternative encoding for spaces in query strings (application/x-www-form-urlencoded format), which differs from the standard percent-encoding where spaces become %20. This distinction often causes confusion, so always verify which encoding convention your API or framework expects and be consistent throughout your application.