URL Encoder/Decoder

How to Encode and Decode URLs

This free online URL encoder/decoder converts text to and from URL percent-encoded format (also called URL encoding) directly in your browser:

1. Choose your mode -- pick "Encode" to convert plain text or a URL into a percent-encoded string, or "Decode" to convert a percent-encoded string back into readable text.
2. Pick the right encoding method -- when encoding, choose encodeURIComponent (default) to encode every reserved character, or encodeURI to preserve URL structure (slashes, colons, query separators).
3. Paste your input -- type or paste your text into the input area.
4. Click Convert -- the result appears in the output area immediately.
5. Copy the result -- use the Copy button to save it to your clipboard.

Conversion runs entirely in your browser. Nothing is uploaded to a server, so your URLs and parameters stay private.

What is URL Encoding (Percent Encoding)?

URL encoding, also known as percent-encoding, is a mechanism defined in RFC 3986 for representing characters in a URI that would otherwise be invalid, reserved, or unsafe to send over HTTP. Each unsafe character is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's byte value in UTF-8.

For example, a space character (byte value 0x20) becomes %20, an ampersand (&) becomes %26, and the at sign (@) becomes %40. Multi-byte Unicode characters are first encoded as UTF-8, then each byte is percent-encoded. The Spanish character "ñ" becomes %C3%B1 because it occupies two bytes in UTF-8.

URL encoding ensures that data placed in a URL travels intact through routers, proxies, browsers, and servers without being misinterpreted as URL syntax (for example, treating a literal ? in a parameter value as the start of the query string).

encodeURIComponent vs encodeURI: When to Use Each

JavaScript provides two built-in functions for URL encoding, and choosing the wrong one is one of the most common bugs developers face when building URLs:

encodeURIComponent

Use encodeURIComponent when you are encoding a single piece of data that will be a component of a URL -- for example, a query-string value, a path segment, or a hash fragment. It encodes every character that has special meaning in a URL, including :, /, ?, #, &, =, +, and @. This is the right choice 90% of the time.

const value = "hello world & friends";
const url = "https://example.com/search?q=" + encodeURIComponent(value);
// => "https://example.com/search?q=hello%20world%20%26%20friends"

encodeURI

Use encodeURI only when you are encoding a complete, already-structured URL and want to preserve its anatomy. It does not encode characters that are valid in a URL structure (: / ? # & = +), so the URL remains usable. This is useful for sanitizing user-pasted URLs that may contain spaces or non-ASCII characters.

encodeURI("https://example.com/path with spaces/file.html?x=1");
// => "https://example.com/path%20with%20spaces/file.html?x=1"

Rule of thumb: if you are concatenating part of a URL, use encodeURIComponent. If you are cleaning up a whole URL, use encodeURI. To decode either, use decodeURIComponent -- it is the safest decoder because it handles every percent-encoded sequence.

Common URL Encoding Use Cases

• Query string parameters -- always encode user input before appending it to a URL, otherwise characters like & and = will break parameter parsing.
• Path segments with special characters -- file names containing spaces, accented letters, or symbols must be percent-encoded to be valid in a URL path.
• Unicode and non-ASCII text -- internationalized URLs, search queries in languages like Spanish, Chinese, or Arabic, and emoji require UTF-8 percent-encoding to survive transport.
• AJAX and fetch() requests -- when constructing form bodies for application/x-www-form-urlencoded POST requests or building query strings for GET requests, every value must be encoded.
• OAuth and API tokens -- many authorization flows pass tokens, redirect URIs, and signatures in URLs; correct encoding is required for the request to validate.
• Mailto, tel, and SMS links -- subjects and message bodies in mailto: URLs must be percent-encoded so spaces and line breaks work across email clients.

URL Encoding Reference Table

The most common characters and their percent-encoded equivalents:

Unreserved characters -- letters (A-Z, a-z), digits (0-9), and - _ . ~ -- are never encoded.

Frequently Asked Questions

What is %20?

%20 is the URL-encoded representation of a space character. The space has byte value 0x20 in ASCII, and percent-encoding represents it as a % followed by that hex value. You may also see spaces encoded as + in application/x-www-form-urlencoded form data, but inside a URL path or modern query string, %20 is the correct and most portable form.

Do I need to encode UTF-8 URLs?

Yes. While modern browsers display Unicode characters in the address bar, the underlying HTTP request must use percent-encoded UTF-8 bytes. If you build a URL programmatically with non-ASCII characters, always pass it through encodeURIComponent (for parts) or encodeURI (for full URLs) to guarantee compatibility with all servers, proxies, and older clients.

Why is encoding URLs important for security?

Improperly encoded URLs are a vector for several attacks. Failing to encode user input that is interpolated into a URL can lead to open redirect vulnerabilities, parameter injection, and broken Content Security Policy (CSP) checks. On the server side, failing to decode and validate input properly can lead to SSRF (server-side request forgery), path traversal, and XSS when the decoded value is reflected back into a page. Always encode on output and validate on input.

Is URL encoding the same as Base64?

No. URL encoding (percent-encoding) is a 1-to-N transformation designed specifically to make text safe inside URLs -- only special characters change, and the result is mostly human-readable. Base64 is a 3-to-4 binary-to-text encoding designed to embed arbitrary binary data in text formats; the result looks completely different from the input. Use URL encoding for URL components and Base64 for binary payloads (images, files, tokens). They are sometimes combined -- for example, a Base64 string placed in a query parameter must itself be URL-encoded because Base64 contains +, /, and =, all of which are reserved in URLs.

What is the difference between encodeURIComponent and encodeURI?

encodeURIComponent encodes everything that has a special meaning in a URL, including : / ? # & = +. encodeURI leaves those characters alone because it assumes you are passing a complete URL whose structure should be preserved. Use encodeURIComponent when building URLs piece by piece; use encodeURI only when sanitizing an existing complete URL.