Encode Component
Encodes all special chars including /, ?, =, &. Use for individual parameter values.
Encode Query String
Encodes a full key=value&key=value query string, preserving = and & separators.
Encode Full URL
Encodes a complete URL, preserving /, :, ?, =, & and other URL-structural characters.
Input
Output
What this tool does
Free URL encoder and decoder -- percent-encode query parameters, full URLs, and key=value query strings online
How URL percent-encoding works, when to use each encoding mode, and key use cases for developers and marketers
This free URL encoder and decoder converts between raw text and percent-encoded URL format instantly in your browser. URLs can only contain a restricted subset of ASCII characters -- letters, digits, and a small set of unreserved characters. Any other character, including spaces, non-ASCII Unicode, and many punctuation symbols, must be encoded using percent-encoding before it can appear safely in a URL. Percent-encoding represents each unsafe byte as a percent sign followed by two uppercase hexadecimal digits. For example, a space becomes %20, an ampersand becomes %26, and the rocket emoji (which is a four-byte UTF-8 character) becomes %F0%9F%9A%80. The tool handles all three major URL encoding variants used in web development, and the decoder correctly handles both %HH percent sequences and the + as space convention used in HTML form submissions.
The tool offers three encoding modes for different situations. Encode Component mode uses JavaScript's encodeURIComponent function, which encodes everything except letters, digits, and the characters - _ . ! ~ * ' ( ). This is the correct mode for encoding individual query parameter values, because it encodes the characters / : ? = & # that would otherwise be interpreted as URL structural delimiters. Encode Full URL mode uses JavaScript's encodeURI function, which deliberately preserves all URL-structural characters so the overall URL shape remains intact while only truly unsafe characters (like spaces and non-ASCII characters) are encoded. Query String mode is the most specific: it splits the input on & separators, then encodes each key and value independently using encodeURIComponent, producing a correctly encoded query string where the = and & separators are preserved while each value is fully encoded. This mode is equivalent to using the URLSearchParams API in JavaScript.
URL encoding is relevant across a wide range of technical and marketing use cases. For backend and API developers, encoding query parameters prevents injection attacks and ensures that dynamic values with special characters are correctly transmitted in GET requests, form submissions, and REST API calls. For frontend developers, it is essential when constructing URLs dynamically from user input -- unencoded spaces or ampersands in URLs frequently cause silent bugs where parameter values are truncated or split. For SEO and digital marketing teams, UTM tracking parameters must be properly encoded when campaign names contain spaces, slashes, or punctuation -- failing to encode these causes broken tracking URLs and misattributed analytics sessions. For DevOps engineers and database administrators, URL decoding is a routine task when reading access logs, monitoring API traffic, or debugging webhook payloads where parameter values appear in percent-encoded form.
Encoding modes and features
Encode Component
Encodes all special chars including /, ?, =, & using JavaScript's encodeURIComponent -- the correct mode for individual parameter values.
Full URL Mode
Preserves URL-structural characters (:, /, ?, =, &) while encoding unsafe chars like spaces -- mirrors JavaScript's encodeURI.
Query String Mode
Splits on & and encodes each key and value independently, preserving the = and & separators for valid multi-parameter query strings.
Decode Mode
Reverses percent-encoding using decodeURIComponent with + to space pre-processing for form-encoded query strings.
Unicode Support
Handles non-ASCII characters, accented letters, emoji, and Chinese/Japanese/Korean text via UTF-8 percent-encoding.
Error Handling
Shows clear error messages for malformed inputs containing truncated percent sequences or invalid UTF-8 byte sequences.
Swap Function
One-click swap transfers the output back to input and toggles the mode -- useful for quickly reversing an encode or decode operation.
Copy Button
Copies the encoded or decoded output to clipboard instantly for pasting into code, APIs, or marketing tools.
Dark Output Panel
Output is displayed in a dark-themed JetBrains Mono panel for comfortable reading of long encoded strings.
Client-Side Only
All encoding and decoding runs entirely in your browser -- no text content is ever transmitted to any server.
Examples
URL encoding examples -- component encoding, query strings, full URLs, decoding, and UTM tracking parameters
Five real-world scenarios showing which encoding mode to use and why the choice of mode matters
ExcellentEncode Component -- parameter value with spaces and special chars
Input (raw value):
hello world & goodbye
Encode Component output:
hello%20world%20%26%20goodbye
Characters encoded:
space -> %20
& -> %26
Using encodeURIComponent on a query parameter value encodes the ampersand and spaces, preventing them from being misinterpreted as URL delimiters. If this value were appended to a URL without encoding as ?q=hello world & goodbye, the & would be parsed as a parameter separator and 'goodbye' would become an unnamed second parameter, corrupting the request.
ExcellentQuery String mode -- preserves separators, encodes values
Input (raw query string):
name=John Smith&city=New York&tag=C++
Query String mode output:
name=John%20Smith&city=New%20York&tag=C%2B%2B
Preserved: = and & separators
Encoded: spaces -> %20, + -> %2B
Query String mode correctly encodes each key and value independently while leaving the = and & separator characters intact. Encoding the entire string with Encode Component would incorrectly encode the separators (= becomes %3D, & becomes %26), producing a single unreadable blob. This mode is the correct choice for building URLs with user-supplied parameter values.
GoodFull URL encoding -- preserves structure, encodes unsafe chars
Input (full URL with spaces):
https://example.com/search results?q=hello world
Encode Full URL output:
https://example.com/search%20results?q=hello%20world
Preserved: :, //, ?, =
Encoded: spaces -> %20
Full URL mode uses encodeURI, which encodes unsafe characters like spaces while deliberately preserving URL-structural characters such as colon, slash, question mark, and equals. This is the correct mode when you have a complete URL that mostly works but contains spaces or other unsafe characters that need to be fixed without altering the URL structure.
GoodDecode -- recovering a percent-encoded URL parameter
Input (encoded):
Hello%20World%21%20%F0%9F%9A%80
Decoded output:
Hello World! 🚀
Decoded:
%20 -> space
%21 -> !
%F0%9F%9A%80 -> 🚀 (4-byte UTF-8 emoji)
Decoding reverses the percent-encoding process, converting %HH sequences back to their original characters. The emoji decodes from a four-byte UTF-8 sequence (%F0%9F%9A%80) back to the rocket character. This is useful when reading log files, debugging API responses, or inspecting tracking URLs where parameter values have been encoded for transmission.
GoodUTM tracking URL -- encode campaign parameters for analytics
Campaign name (raw):
Summer Sale 2024 / Email Newsletter
Encode Component output:
Summer%20Sale%202024%20%2F%20Email%20Newsletter
Full tracking URL:
https://example.com/?utm_source=email
&utm_medium=newsletter
&utm_campaign=Summer%20Sale%202024%20%2F%20Email%20Newsletter
UTM campaign parameters frequently contain spaces, slashes, and other characters that must be encoded before use in URLs. The slash in the campaign name is particularly important -- without encoding it as %2F, some analytics platforms would interpret it as a path separator or split the parameter value. Always encode individual UTM values with Encode Component before appending them to a URL.
FAQ
Frequently asked questions about URL encoding, percent-encoding, encodeURIComponent vs encodeURI, and query string encoding
Common questions about when and how to encode URLs, what characters need encoding, and how decoding errors occur
What is URL encoding and why is it necessary?
URL encoding (also called percent-encoding) is the process of converting characters that are not permitted in URLs -- or that have special reserved meaning -- into a safe representation. A URL can only contain characters from a restricted subset of ASCII: letters, digits, and a small set of unreserved characters (hyphen, underscore, period, tilde). Any other character must be encoded as a percent sign followed by two hexadecimal digits representing the character's UTF-8 byte value. For example, a space becomes %20, an ampersand becomes %26, and the hash symbol becomes %23. Without encoding, these characters would be misinterpreted as URL structural delimiters, breaking the request or causing unexpected behavior in browsers and servers.
What is the difference between encodeURIComponent and encodeURI in JavaScript?
Both functions apply percent-encoding, but they differ in which characters they encode. encodeURIComponent is designed for encoding individual values within a URL -- it encodes everything except letters, digits, and the characters - _ . ! ~ * ' ( ). This includes the characters / : ? = & # which are structural in URLs, making it safe for parameter values where those characters would otherwise break the URL. encodeURI, on the other hand, is designed for encoding a complete URL string -- it intentionally preserves all URL-structural characters (/ : ? = & # @ and others) so the URL remains valid, while encoding only truly unsafe characters like spaces, non-ASCII characters, and symbols like < > { } | \ ^ `. Use encodeURIComponent for individual query parameter values, and encodeURI for a full URL string.
What is the difference between %20 and + for encoding spaces in URLs?
Both %20 and + represent a space character in URL contexts, but they are used in different parts of a URL. %20 is the standard percent-encoding of a space and is used in URL path segments -- for example, /my%20file.txt. The + character as a space representation comes from the application/x-www-form-urlencoded encoding format, which is used in HTML form submissions and query strings. In query strings submitted by HTML forms, spaces are encoded as + for historical reasons. When decoding, a URL decoder must convert both %20 and + to spaces when parsing query string values. This tool handles the + to space conversion during decoding by replacing + with %20 before calling decodeURIComponent.
How does URL encoding work for Unicode and non-ASCII characters?
Unicode characters (including non-Latin scripts, accented characters, emoji, and Chinese/Japanese/Korean text) cannot appear directly in URLs. They are first converted to their UTF-8 byte representation, then each byte is percent-encoded separately. For example, the copyright symbol (c) is U+00A9, which encodes to the two-byte UTF-8 sequence 0xC2 0xA9, resulting in %C2%A9 in a URL. The rocket emoji (U+1F680) encodes to the four-byte UTF-8 sequence 0xF0 0x9F 0x9A 0x80, resulting in %F0%9F%9A%80. This multi-byte encoding is why non-ASCII characters produce longer percent-encoded strings. JavaScript's encodeURIComponent handles this automatically using UTF-8 encoding.
When should I use Query String mode instead of Encode Component?
Use Query String mode when you have a complete key=value&key=value query string and you want to encode the keys and values without destroying the = and & separators. For example, if you have the query string name=John Smith&city=New York, using Encode Component would encode the entire string including the = and & characters, producing name%3DJohn%20Smith%26city%3DNew%20York, which is incorrect. Query String mode instead encodes each key and value independently -- producing name=John%20Smith&city=New%20York -- while preserving the separators. Use Query String mode when building URLs with user-supplied parameters. Use Encode Component when encoding a single value that will be inserted into a larger URL template.
What characters are safe in URLs and do not need encoding?
RFC 3986 defines two categories of safe characters. Unreserved characters never need encoding: letters A-Z and a-z, digits 0-9, and the four symbols hyphen (-), underscore (_), period (.), and tilde (~). Reserved characters are allowed in URLs but have special meaning as delimiters -- they include: / (path separator), : (scheme/port separator), ? (query start), # (fragment start), [ ] @ (authority components), ! $ & ' ( ) * + , ; = (sub-delimiters). Reserved characters only need to be encoded when they appear inside a component where they would be misinterpreted -- for instance, if a query parameter value contains an & it must be encoded as %26 to prevent it from being parsed as a parameter separator.
How do I encode a URL in JavaScript for use in a fetch or XMLHttpRequest call?
For constructing URLs with query parameters in JavaScript, the best practice is to use the URLSearchParams API which handles encoding automatically: const params = new URLSearchParams({ name: 'John Smith', city: 'New York' }); fetch('/api/search?' + params.toString()). If you need to manually encode individual values, use encodeURIComponent on each value: const url = '/api/search?name=' + encodeURIComponent(name) + '&city=' + encodeURIComponent(city). Never use encodeURI on the full URL with dynamic query values already appended, as encodeURI does not encode the = and & characters and will not encode special characters within the values. This tool's Encode Component and Query String modes replicate the encodeURIComponent and URLSearchParams behavior respectively.
What causes 'URI malformed' errors when decoding a URL?
A 'URI malformed' error (thrown by JavaScript's decodeURIComponent as a URIError) occurs when the input contains a percent sign (%) that is not followed by exactly two valid hexadecimal digits, or when a percent-encoded sequence forms an incomplete or invalid UTF-8 byte sequence. Common causes include: truncated percent sequences like %2 or a lone % character, invalid hex characters like %GG, a high UTF-8 byte without its continuation bytes (e.g. %C2 without %A9), or text that was never encoded but contains literal % characters (such as a percentage value like 50%). To fix this, either ensure the input is a properly encoded URL component, or pre-process the input to escape literal % characters as %25 before decoding.
How is URL encoding used in SEO and marketing tracking parameters?
URL encoding is essential for UTM tracking parameters and marketing campaign URLs. When campaign names, content descriptions, or source names contain spaces, slashes, or special characters, they must be encoded before being appended to a URL. For example, a campaign name 'Summer Sale 2024 / Email' would need to be encoded as Summer%20Sale%202024%20%2F%20Email when used as a utm_campaign value. Analytics platforms like Google Analytics and Adobe Analytics automatically decode these values when processing hits, so the report shows the original readable string. Incorrectly encoded or unencoded tracking parameters can result in broken URLs, misattributed sessions, or parameters being split across multiple values in analytics reports.
How does URL encoding differ from HTML encoding and Base64 encoding?
These three encoding schemes serve different purposes. URL encoding (percent-encoding) converts characters unsafe in URL contexts into %HH hex sequences -- it is specifically designed for URLs and query strings. HTML encoding (also called HTML entity encoding) converts characters that have special meaning in HTML markup into safe entity representations: < becomes <, > becomes >, & becomes &, and " becomes ". HTML encoding is applied when inserting dynamic text into HTML to prevent XSS attacks. Base64 encoding converts arbitrary binary data (including text) into a string using only 64 ASCII characters (A-Z, a-z, 0-9, +, /), typically for embedding binary data in text contexts like JSON payloads, data URIs, or email attachments. A URL might contain Base64-encoded data that is itself URL-encoded, so the encodings can be combined.
Related Tools
Need a disposable email address?Stop giving your real email to sites you don't trust -- get a free instant throwaway with no signup and no trace.
Get Free Temp Mail ->