Reverse Text Generator

Encode a URL Component Without Breaking the URL

Use percent encoding for a query value, understand reserved characters, and handle decode errors.

A URL contains syntax: slashes separate path segments, question marks begin queries, and ampersands can separate query parameters. When user text belongs inside one component, reserved characters need encoding so they are interpreted as data. This site uses JavaScript’s encodeURIComponent for encoding and decodeURIComponent for decoding.

In this guide

Encode the value, then assemble the URL

Suppose a query value is “red & blue”. The encoder produces “red%20%26%20blue”. Insert that encoded value after the parameter name. If you encode the entire assembled URL instead, characters such as its slashes and query separator will also be encoded, changing the URL structure you intended.

encodeURIComponent uses UTF-8 percent-encoded bytes for characters outside its unescaped set. A space becomes %20 and an ampersand becomes %26. This is a transport representation of the original text, not a readable slug and not encryption.

Input
red & blue
Output
red%20%26%20blue

Decode with the right assumptions

The site’s decode mode first converts plus signs to encoded spaces, then calls decodeURIComponent. That plus-sign behavior is common in form-style query strings, but a literal plus sign supplied to this tool will also become a space unless represented as %2B. Check the source format before decoding.

A malformed percent sequence or invalid UTF-8 byte sequence raises an error rather than producing a guessed character. That is useful when debugging broken links. Preserve the original string while investigating, since deleting the bad portion can change meaning.

Separate percent encoding from slug creation

A slug generator lowers case, removes punctuation, strips many accents, and may discard non-Latin letters. It creates a compact readable identifier and is deliberately lossy. Percent encoding retains the source text as encoded bytes so it can be decoded.

For a path created from a title, decide whether you want a human-readable, stable slug or faithful representation of a path segment. A published slug may need redirects if changed; an encoded component still needs ordinary URL construction around it.

Test in context

Encode a short value containing spaces, ampersands, and a plus sign. Assemble the target URL and check that its parameters remain separate. Decode the value and compare with the original. For production code, use a URL or URLSearchParams API appropriate to the destination instead of concatenating complex links by hand.

A common workflow error is encoding a value twice. The percent sign introduced by the first pass can itself be encoded by the second pass, so a space represented as %20 may become %2520. If a link displays visible percent sequences after decoding, inspect whether two encoding layers were applied. Conversely, decoding twice can change data that intentionally contained a literal percent sequence. Trace the format at each boundary rather than adding automatic passes.

When building a query with several values, an API such as URLSearchParams can handle separators and component encoding consistently. The standalone tool is best for learning what happens to one value or debugging an existing string. Always compare the assembled link in its intended context, because a correctly encoded value can still be placed in the wrong URL position.

  • Encode one component at a time.
  • Represent a literal plus sign as %2B in form-style values.
  • Treat malformed input as a data issue to investigate.

Frequently asked questions

Does this encode an entire URL safely?

It encodes the supplied string as one component; encoding a complete assembled URL also encodes structural separators.

Why does + decode to a space here?

This tool applies a form-style plus-to-space conversion before percent decoding.

Is a slug the same as URL encoding?

No. Slug creation is a lossy naming transformation; percent encoding represents source bytes.

Try the related tools

Further reading