Online URL Encoder/Decoder: Percent-Encoding Explained

What Is URL Encoding

URL Encoding (also called Percent-Encoding) converts special characters into % followed by two hexadecimal digits, which is exactly what an online url encoder does for you. For example, a space becomes %20, and the Chinese character "你" becomes %E4%BD%A0.

URL encoding ensures URLs contain only safe ASCII characters, preventing special characters from breaking URL structure.

Why You Need URL Encoding

1. Safe transmission: Special characters in URLs (?, &, =) have reserved meanings and must be encoded
2. Chinese/non-ASCII support: Browser address bars don't directly support non-ASCII characters
3. Form submission: HTML forms using application/x-www-form-urlencoded require encoding
4. API calls: Query parameter values must be encoded to avoid ambiguity

Common URL Encoding Reference

Two Encoding Scenarios

1. URL Path Encoding

Encodes the path portion while preserving / and path structure:

Original: https://example.com/docs/getting-started.html
Encoded:  https://example.com/%E6%96%87%E6%A1%A3/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97.html

2. Query Parameter Encoding

Encodes query parameter values while preserving ?, &, = structure (a url params parser can help you inspect the result):

Original: https://example.com/search?q=hello world&lang=zh-CN
Encoded:  https://example.com/search?q=hello%20world&lang=zh-CN

How to Use an Online URL Encoder/Decoder

Using ToolVault's URL Encoder:

Encode

1. Enter the original text or URL
2. Choose encoding mode (Component / Full URI)
3. To match form/query habit, enable Encode: space as +
4. Click Encode and copy the result

Decode

1. Enter the encoded text
2. Form strings (spaces as +) → enable Decode: treat + as space
3. Truncated log fragments (lone %) → enable Decode: lenient
4. Suspected double encoding (e.g. %2520) → enable Decode: peel all layers (layer count shown beside output)
5. Click Decode

Strict decode is the default: malformed % raises an error instead of failing silently — useful for spotting truncation or a second encode.

Encoding Mode Differences

The page offers two modes (default: Component):

Encoding Examples

const url = 'https://example.com/path?q=hello world';

// encodeURIComponent (encodes parameter values)
// Result: https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world

// encodeURI (encodes full URL)
// Result: https://example.com/path?q=hello%20world

URL Encoding in Web Development

HTML Forms

<form action="/search" method="GET">
  <input name="q" value="hello world">
  <!-- Submits as: /search?q=hello+world -->
</form>

To match those + bytes, enable “space as +” on encode; when reading form strings with bare decodeURIComponent, replace + with spaces first — or use this site’s “+ as space” toggle.

JavaScript fetch API

// Auto-encodes query parameters
const params = new URLSearchParams({
  q: 'hello world',
  lang: 'zh-CN'
});
fetch(`/search?${params}`);

Note: URLSearchParams.toString() emits form-urlencoded (spaces as +), which differs from bare encodeURIComponent (spaces as %20) — canonicalize before signature compares.

Backend Reception

// Node.js Express
app.get('/search', (req, res) => {
  const query = req.query.q; // Auto-decoded to "hello world"
});

encodeURI vs encodeURIComponent: the one distinction that matters

encodeURI preserves URL structure characters (/?:@&=+#), encoding only the content — right for encoding a full URL to embed. encodeURIComponent encodes everything including structure — right for a query parameter value. The classic bug: using encodeURIComponent on a full URL and getting %2F for every slash (double-decoding then fails), or encodeURI on a parameter value and having & inside the value split into a second parameter (injection-shaped bugs). The rule that never fails: ask "am I encoding a whole URL or a piece of a value?" — whole: encodeURI; piece: encodeURIComponent; piece containing a URL: encodeURIComponent, and the receiver URL-decodes once before parsing the inner URL.

The plus-sign trap: query strings vs path segments

In application/x-www-form-urlencoded (form submissions, many query parsers), space encodes as +; in path segments and in RFC 3986 percent-encoding generally, space is %20 and + is a literal plus. Encode a phone number +8613... for a query string without encoding the plus and the server decodes it to a space. The asymmetry bites in reverse too: JS decodeURIComponent never converts + to space (RFC behavior), while PHP's urldecode and many framework parsers do (form behavior). This mismatch explains a large share of "signs break on some servers" signature-verification bugs.

This site splits the two toggles: Encode: space as + and Decode: treat + as space, so you can compare the same string under both habits.

Double encoding, lenient decode, and signature verification

API signature schemes that include the URL or query in the signed payload fail when encoding layers disagree: the client signs the encoded form, the server decodes once for routing then re-encodes differently for verification — bytes differ, signature fails. The defensive pattern: sign the canonical form (one documented encoding, applied identically both sides), never the raw-or-encoded whatever-arrived string.

Debugging tips:

• Seeing %2520 → a double-encoded space. Enable “peel all layers”; a reported depth of 2 is the smoking gun.
• A literal 100% fed to decodeURIComponent throws URIError. Production code needs try/catch; for half-cut log strings, enable “lenient” so valid %HH still decodes and invalid fragments stay put.

FAQ

What's the Difference Between URL Encoding and Base64?

URL encoding preserves URL structure, encoding only special and non-ASCII characters. Base64 is a general binary-to-text encoding that produces URL-unfriendly characters (+, /, =). Use URL encoding for URL contexts; if a payload is already Base64 and goes into a query, wrap it in percent-encoding as well.

Why Is a Space Sometimes %20 and Sometimes +?

In URL paths, spaces encode as %20. In query strings using application/x-www-form-urlencoded format, spaces encode as +. This tool defaults to %20 and only writes + when the encode toggle is on.

Can an Encoded URL Still Be Accessed?

Yes. Browsers and servers support URL encoding and automatically decode it. An encoded URL is fully valid.

How Is “Peel All Layers” Different from One Decode Click?

A single Decode peels one layer (%2520 → %20). Peel mode loops until the string stops changing (with a cap) and reports depth — useful for finding how many times something was encoded.

Triage notes

The encodeURI versus encodeURIComponent choice is compressed into one never-wrong split: ask whether you are encoding a whole URL or a value fragment — URI for the whole, Component for the fragment; both classic bugs (a screen full of %2F, an & inside a value splitting off a second parameter) come from using them backwards. The plus-sign trap names the decoder split: JavaScript's decodeURIComponent never turns + into a space (RFC behavior) while PHP's urldecode does (form behavior), a major source of 'the signature fails on some servers', which is why the tool separates the + switches on the encode and decode sides. Strict decoding by default is deliberate: a malformed % errors out instead of being silently swallowed, and %2520 is left to peel mode — a layer count of 2 is hard evidence of double encoding.

Provided by ToolVault. Related tools: URL Encode/Decode, URL Params Parser, URL Parser, Base64. Visit the home page for more developer tools.