How to Encode and Decode a URL Online: Complete Guide

Seeing strings such as %20, %26, %3D, or %E2%9C%93 inside a link can look mysterious, but they are normal examples of percent-encoding. It is a standardized way of representing bytes inside a URI when a character cannot be used directly in that context or would otherwise be interpreted as URL syntax.

This guide explains how to encode URL components, how to decode an encoded URL, why full URLs and URL parameters need different treatment, when spaces become %20 or +, and how to avoid double-encoding problems.

What Is URL Encoding?

URL encoding is also called percent-encoding. RFC 3986 describes percent-encoding as a way to represent an octet with a percent sign followed by two hexadecimal digits. For example, the ASCII space byte is represented as %20. The standard also separates reserved characters, which may act as delimiters, from unreserved characters such as letters, digits, hyphen, period, underscore, and tilde. citeturn416641search1

Why Do URLs Need This?

A URL is structured data, not just a sentence. Characters such as ?, #, &, and = can have structural meanings. When those characters are part of the actual data, they may need percent-encoding so the receiving system does not mistake data for syntax. citeturn416641search1

URL Component vs Full URL Encoding

In JavaScript, encodeURIComponent() is designed for an individual URI component, while encodeURI() leaves characters that belong to URI syntax unescaped. That distinction is why blindly passing an entire URL to encodeURIComponent() can produce an unusable address. citeturn416641search5

How to Encode and Decode a URL Online

Encode a URL Component

1. Open the URL Encoder & Decoder.
2. Keep URL Component mode selected.
3. Paste text, a search term, a filename, or one query-parameter value.
4. Click Encode.
5. Copy the percent-encoded result.

Encode a Complete URL

1. Select Full URL mode.
2. Paste an absolute URL beginning with http:// or https://.
3. Click Encode.
4. Review the output and test the final link.

Decode

1. Paste an encoded value or encoded URL.
2. Choose the matching mode.
3. Click Decode.
4. Check the readable output before reusing it.

Common URL Encoding Examples

%20 vs +: What Happens to Spaces?

%20 is the percent-encoded representation of a space in URI syntax. Some query-string serialization formats, especially application/x-www-form-urlencoded, represent a space with +. MDN documents this behavior for URLSearchParams. Therefore, do not automatically treat every + in a URL as a universally interchangeable form of %20. citeturn416641search0

Common URL Encoding Mistakes

1. Encoding the Entire URL With encodeURIComponent()

This turns structural characters such as :, /, and ? into data. Use component encoding for component data and URL-aware encoding for the complete address.

2. Double-Encoding

RFC 3986 advises against encoding the same string more than once. A literal percent sign in an encoded sequence can become %25, producing values such as %2520 instead of %20. citeturn416641search2

3. Decoding Before Parsing URL Structure

Reserved characters can regain delimiter meaning after decoding. Parse the URL into components first, then decode the data that belongs to those components. citeturn416641search2

4. Assuming URL Encoding Provides Security

Percent-encoding is representation, not encryption. Anyone who has the URL can decode its percent-encoded characters. Never use URL encoding as a substitute for authentication, encryption, or secret storage.

Developer Examples

JavaScript

For an individual value, JavaScript provides encodeURIComponent() and decodeURIComponent(). For a complete URI, encodeURI() and decodeURI() preserve URI syntax characters differently. citeturn416641search5

Python

Python’s URL utilities provide quote-style functions for percent-encoding components. The important principle remains the same: encode the data at the level where it is inserted into the URL.

Related SmartWebHub Tools

When you need a human-readable SEO path from a title, our Text to Slug tool is more appropriate than percent-encoding a sentence. When an API workflow contains JSON, the JSON Formatter can help you validate and format the payload before constructing requests. For binary-to-text conversion, use the Base64 Encoder & Decoder. These tools solve different problems and should not be treated as interchangeable encoding methods.

Frequently Asked Questions

For standards-level detail, see RFC 3986 and MDN’s encodeURIComponent() documentation.