URL Encoding and Decoding: A Practical Guide

A URL can contain more than letters and numbers. Spaces, ampersands, question marks, non-English characters, and other symbols may have special meaning in a URL. When user-entered text is placed inside a URL, those characters can be interpreted as URL syntax instead of data.

URL encoding solves this problem by representing characters in a URL-safe form. This guide explains what percent-encoding means, which part of a URL should be encoded, and how to decode values again.

You can try the URL Encoder and URL Decoder when you need to transform a value quickly.

What is URL encoding?

URL encoding is commonly called percent-encoding. A character that needs escaping is represented by a percent sign followed by hexadecimal digits representing its bytes.

For example:

Original:  Hello World!
Encoded:   Hello%20World!

The space becomes %20. Non-ASCII characters are encoded using their UTF-8 byte sequence and then represented with percent escapes.

Percent-encoding is not encryption. Anyone can decode the value, so never use it to hide passwords, API keys, or private information.

Why do URLs need encoding?

Some characters have structural meaning in a URL:

Character	Common URL role
`?`	Introduces a query component
`&`	Separates query parameters
`=`	Separates a parameter name and value
`#`	Introduces a fragment identifier
`/`	Separates path segments
`+`	Has special meaning in some form-encoding contexts

Suppose a search form sends this text:

C++ & Rust

Placed into a query value without encoding, the ampersand may be interpreted as the start of another parameter. Encoding the value keeps the data separate from the URL structure.

Encode a URL component

The JavaScript function encodeURIComponent() is designed for encoding an individual URI component, such as a query parameter value.

const search = "C++ & Rust";
const encoded = encodeURIComponent(search);

console.log(encoded);
// C%2B%2B%20%26%20Rust

The important detail is that the value is encoded as data. Characters that could otherwise be interpreted as separators are escaped.

Encode a query parameter value

const searchTerm = "wireless keyboard & mouse";
const url = "https://example.com/search?q=" +
  encodeURIComponent(searchTerm);

console.log(url);
// https://example.com/search?q=wireless%20keyboard%20%26%20mouse

For application code, the URL and URLSearchParams APIs are often preferable to manually assembling a complete query string:

const url = new URL("https://example.com/search");
url.searchParams.set("q", "wireless keyboard & mouse");

console.log(url.toString());

The URL API handles query parameter construction and avoids many manual concatenation mistakes.

Encode a value with the online tool

Open the iamnoobs URL Encoder.
Enter the text or value you want to encode.
Select Encode URL.
Review the encoded result.
Copy the output or download it as a text file.

The encoder uses JavaScript's encodeURIComponent(), so it treats the full input as one URI component. This is appropriate for a parameter value, not for blindly encoding an entire URL that already contains separators.

Decode percent-encoded text

Decoding reverses percent-encoding and restores the original text when the encoded value is valid.

const encoded = "C%2B%2B%20%26%20Rust";
const decoded = decodeURIComponent(encoded);

console.log(decoded);
// C++ & Rust

Use the iamnoobs URL Decoder to decode a value:

Paste the percent-encoded text.
Select Decode URL.
Review the decoded result.
Copy the restored text.

The decoder reports an error when the input contains an invalid percent-encoded sequence.

A common confusion: %20 versus +

You may see a space represented as either %20 or + in query strings.

These forms come from different conventions:

encodeURIComponent() represents a space as %20.
The application/x-www-form-urlencoded convention used by HTML form submission and URLSearchParams represents a space as + when serializing form-style query data.

Do not assume every plus sign means a space in every URL context. In a path or a generic URI component, plus can be a literal plus character.

Common mistakes to avoid

1. Encoding the entire URL as one component

Do not pass a complete URL to a component encoder if you want to preserve its scheme, slashes, query separators, and fragment structure.

Encode the individual value that will be inserted into the URL, or use the URL API.

2. Encoding a value more than once

If you encode an already encoded value, percent signs can themselves be encoded.

Original:       Hello World
First encoding: Hello%20World
Second pass:    Hello%2520World

Decode only when you know the value is encoded, and avoid repeatedly applying the transformation without checking the data flow.

3. Confusing encoding with security

Percent-encoding does not validate input, prevent injection by itself, or make sensitive values secret. Apply context-appropriate validation and security controls on the server.

4. Ignoring malformed sequences

A string containing an incomplete escape such as %2 is not a valid complete percent escape. A decoder may throw an error rather than guessing what was intended.

When should you use URL encoding?

URL component encoding is useful when:

Sending a search term through a query parameter.
Building links from user-entered text.
Passing non-English text in a URL.
Handling symbols such as ampersands and question marks as data.
Debugging values received from an API or browser address bar.

Frequently asked questions

Is URL encoding the same as Base64?

No. URL percent-encoding represents characters using percent escapes. Base64 converts binary data into a text representation using a different encoding scheme. Neither is encryption.

Should I encode a full website address?

Usually not with a component encoder. Preserve the URL structure and encode only the individual components that contain data.

Can I decode any encoded URL safely?

You can decode a value to inspect it, but decoding does not make it trustworthy. Treat decoded input as untrusted data and validate it before using it in an application.