Skip to main content
Encoding

RFC 3986-Style URI Component Encoder

Encode an entire input string as one UTF-8 URI component with encodeURIComponent plus explicit escapes for !, apostrophe, parentheses, and asterisk. Useful for developers building query strings, constructing API URLs, and preparing user input for safe transmission in web addresses.

URL tools

In brief

This tool encodes one component, not a structured whole URL: colons, slashes, question marks, hashes, ampersands, and equals signs are intentionally escaped.

What this tool supports

  • Runs encodeURIComponent over typed, pasted, or imported Unicode text, using UTF-8 percent bytes for non-ASCII characters.
  • Additionally escapes !, apostrophe, (, ), and * with uppercase hexadecimal to align the output with the RFC 3986 unreserved set.
  • Leaves only letters, digits, hyphen, period, underscore, and tilde unescaped; reserved URL delimiters are encoded because the input is treated as one component.
  • Provides live or manual conversion, copy, and encoded-url.txt download without sending or resolving the input.

How to use RFC 3986-Style URI Component Encoder

Follow this implementation-specific workflow for RFC 3986-Style URI Component Encoder; each step reflects the controls and limits in the current browser workspace.

  1. 1

    Step 1

    Provide the exact source

    Identify the single URI component to encode, such as one query value or path-segment value; do not paste a full URL unless every delimiter should become data.

  2. 2

    Step 2

    Choose the operation

    Paste, type, or import the exact Unicode text, preserving intended spaces and literal percent signs.

  3. 3

    Step 3

    Configure the available options

    Keep Live enabled or press Encode to apply UTF-8 encodeURIComponent plus uppercase escapes for the five additional punctuation characters.

  4. 4

    Step 4

    Run the local operation

    Check that structural delimiters are added outside the encoded value by the receiving URL builder.

  5. 5

    Step 5

    Verify and continue

    Copy or download the component and round-trip it once with matching decode semantics.

Common mistakes

Encoding a complete URL and expecting it to remain navigable

Consequence: The tool encodes : / ? # & = as component data, producing text such as https%3A%2F%2F rather than a structured URL.

Fix: Parse/build the URL and encode only each data-bearing component or query value.

Encoding text that is already percent-encoded

Consequence: The percent sign becomes %25, creating double encoding such as %2520.

Fix: Keep raw and encoded representations distinct and encode exactly once.

Using this output as application/x-www-form-urlencoded without checking spaces

Consequence: encodeURIComponent uses %20 for spaces, while form serialization commonly uses + and has its own rules.

Fix: Use URLSearchParams or the receiving protocol’s form serializer when form encoding is required.

Best practices

  • Encode data before concatenating it with structural URI delimiters.
  • Round-trip representative Unicode, reserved punctuation, percent, and plus characters with the exact receiver.
  • Prefer URL and URLSearchParams APIs for complete URLs and query strings rather than manual concatenation.

Connected workflows

Build a URL from safely encoded component data

RFC 3986-Style URI Component EncoderURL ValidatorPercent Encoding Decoder

Validate raw data, encode each component once, assemble it with URL APIs, then validate and round-trip the finished URL.

  1. Identify component boundaries
  2. Encode raw component data
  3. Assemble with URL/URLSearchParams
  4. Validate the complete URL
  5. Round-trip expected values

Browser limitations

  • The input is always one component; there is no mode for path segments, full URLs, form bodies, IDNA hostnames, or selective reserved-character preservation.
  • encodeURIComponent throws on a lone UTF-16 surrogate; the workspace surfaces the thrown message as output rather than a structured validation error.
  • Large strings are transformed synchronously on the main thread and the tool does not validate that the result fits a receiver’s URL-length policy.

Authoritative resources

RFC 3986: Uniform Resource Identifier (URI) Generic SyntaxPublisher: IETF / RFC Editor · Reviewed: 2026-07-26encodeURIComponent()Publisher: MDN Web Docs · Reviewed: 2026-07-26

Concrete examples

Input
café & tea
Result
The UTF-8 bytes for é are %C3%A9, spaces are %20, and the component-data ampersand is %26.

encodeURIComponent creates UTF-8 escapes, and the post-pass uppercases/encodes RFC 3986 punctuation outside the unreserved set.

Frequently asked questions

Why are https:// and query separators encoded?

The whole input is treated as one component, so colon, slash, question mark, ampersand, and equals are data rather than structure.

Which characters remain unchanged?

ASCII letters/digits plus hyphen, period, underscore, and tilde remain; this implementation also escapes !, apostrophe, parentheses, and asterisk.

How are non-ASCII characters encoded?

JavaScript first represents them as UTF-8 bytes and emits one %HH triplet per byte, as shown by é → %C3%A9.

Is %20 the same as plus for spaces?

Not universally. %20 is generic percent encoding; + as space is an application/x-www-form-urlencoded convention handled by form serializers and this project’s decoder.

Can I encode an internationalized domain name with this?

Not correctly as a host. Domain labels normally need IDNA/Punycode processing through URL APIs, not percent-encoding the entire hostname.

Privacy and offline behavior

Text and encoded output stay in this browser; no URL is requested or resolved. Clipboard, file import, and download occur only through explicit controls, and encoding works offline after assets are cached.