Skip to main content

URL Encoder & Decoder — Component / Full URL / Form Data

Encode and decode URL-unsafe characters — query strings, path segments, full URLs — instant, browser-only

  • Runs locally
  • Category Encoding & Crypto
  • Best for Checking small payloads, tokens, hashes, and encoded values quickly.
Quick ref:space→%20&→%26=→%3D#→%23?→%3F+→%2B/→%2F:→%3A
Encoding comparison: component vs full URL vs form▾
CharComponentFull URLForm (+)Note
(space)%20%20+form uses + for space
&%26&%26kept in full URL
=%3D=%3Dkept in full URL
#%23#%23kept in full URL
?%3F?%3Fkept in full URL
/%2F/%2Fkept in full URL
:%3A:%3Akept in full URL
+%2B+%2Bescape to avoid space ambiguity
@%40@%40kept in full URL
中%E4%B8%AD%E4%B8%AD%E4%B8%ADall modes encode UTF-8
Browser API quick reference▾
APIEncoding usedWhen to use
encodeURIComponent()ComponentEscapes everything except A–Z a–z 0–9 - _ . ~
encodeURI()Full URLPreserves the characters a valid URI may already contain
URLSearchParamsform-urlencodedSpace → +, encodes most specials; best for query strings
URL constructorStrict RFC 3986Throws on invalid chars in pathname/host; use for validation
fetch()NoneYou must pass a pre-encoded URL string
window.location.searchNoneReturns the raw query string; decode yourself
React & fetch code examples▾

1. Build a search URL — one query param

const query = "café & boulangerie";
const url = `https://example.com/search?q=${encodeURIComponent(query)}`;
// → https://example.com/search?q=caf%C3%A9%20%26%20boulangerie

2. Multiple params — use URLSearchParams (recommended)

const params = new URLSearchParams({
  q: "café & boulangerie",
  lang: "fr",
  page: "2",
});
const url = `https://api.example.com/search?${params}`;
// → https://api.example.com/search?q=caf%C3%A9+%26+boulangerie&lang=fr&page=2

3. React component — URL state + fetch

function SearchPage() {
  const [query, setQuery] = useState("");

  const search = async () => {
    const res = await fetch(
      `/api/search?q=${encodeURIComponent(query)}`
    );
    const data = await res.json();
    // handle data…
  };

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onKeyDown={(e) => e.key === "Enter" && search()}
    />
  );
}

4. OAuth redirect_uri — encode the whole callback URL

const callback = "https://app.example.com/cb?next=/dashboard";
const authUrl =
  "https://provider.com/oauth2/authorize" +
  "?client_id=my-app" +
  `&redirect_uri=${encodeURIComponent(callback)}` +
  "&response_type=code";

5. Guard against double-encoding — test before you encode

const isAlreadyEncoded = (s) => /%[0-9A-Fa-f]{2}/.test(s);

const safeEncode = (value) =>
  isAlreadyEncoded(value) ? value : encodeURIComponent(value);

safeEncode("hello%20world"); // already encoded → "hello%20world"
safeEncode("hello world");   // not encoded    → "hello%20world"

6. Selective path encoding — encode unsafe chars, preserve /

const componentUnsafe = /[^A-Za-z0-9_.~-]/g;
const encodePath = (path) =>
  path.replace(componentUnsafe, (ch) =>
    ch === "/" ? "/" : encodeURIComponent(ch)
  );

encodePath("/résumé/2026/café");
// → "/r%C3%A9sum%C3%A9/2026/caf%C3%A9"
Regex patterns for URL encoding▾
PatternUse caseWhat it does
/%[0-9A-Fa-f]{2}/gFind percent-encoded bytesMatches any valid %XX sequence — use to detect or count encoded characters
/%25[0-9A-Fa-f]{2}/Detect double-encoding%25XX means the % itself was encoded — the string was percent-encoded twice; decode once to fix
/[^A-Za-z0-9_.~-]/gChars needing component-encodingEvery match is a character encodeURIComponent would escape — useful for selective encoding or validation
/\+/gForm-urlencoded spacesIn application/x-www-form-urlencoded, + means space; replace with %20 before calling decodeURIComponent
/^https?:\/\/\S+$/Simple URL presence checkQuickly test that a value looks like an http/https URL before encoding or fetching

What this tool does

Free online URL encoder and decoder. Convert special characters (spaces, &, ?, #, Chinese, emoji) to %xx percent-encoded form, or decode back. Supports full URL mode (only escapes unsafe chars) and component mode (escapes everything including & = #). 100% client-side, your URLs never leave the browser.

Tool details

Input
Text + Structured content
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Copy + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
May use a live lookup
A network call is detected in the component, so redact sensitive data when appropriate.
Save / share
Shareable URL state
Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget
Initial JS <= 8 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Encoding & Crypto · Developer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How URL Encoder / Decoder fits into your work

Use it for quick browser-side encoding, decoding, hashing, token checks, and share-safe transformations.

Encoding jobs

  • Checking small payloads, tokens, hashes, and encoded values quickly.
  • Preparing values for APIs, URLs, docs, or support tickets.
  • Avoiding account-based tools when the input might be sensitive.

Encoding checks

  • Do not paste live secrets unless you are comfortable with local browser handling.
  • Confirm whether the operation is reversible before sharing the result.
  • For hashes, compare the exact algorithm and casing expected by the receiver.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 Base64 Encoder & Decoder Encode or decode Base64 — text, files, and Data URLs. Runs entirely in your browser. Open
  2. 2 HTML Entities Encoder Encode/decode HTML entities — &amp; &lt; &gt; &quot; &#39; and all numeric refs — browser-only Open
  3. 3 Punycode / IDN Converter Unicode ⇄ Punycode for internationalized domains — münchen.de ⇄ xn--mnchen-3ya.de — per-label, email-aware, browser-only Open

Real-world use cases

  • Pasting a tracking link into a marketing email

    Your UTM string has a campaign name with spaces and an ampersand: "Summer & Fall 2026". Drop the whole value into component mode and it becomes Summer%20%26%20Fall%202026, so the & no longer cuts your query string in half. One pass, one param, and the click still lands on the right utm_campaign.

  • Building a Google Maps or search deep link by hand

    You want a maps URL for "Café René, 12 Rue de l'Église". Letters with accents, a comma, and an apostrophe all break a raw href. Component-mode encode the query part only and you get Caf%C3%A9%20Ren%C3%A9%2C... which opens the exact place instead of a 404 or a garbled search.

  • Debugging why an API call returns 400

    A teammate sends a URL that 400s. Paste it into decode mode and the hidden %26 and %3D suddenly read as & and =, revealing that a JSON body got stuffed into a single query param. Now you can see the real structure in seconds instead of squinting at 40 characters of %xx.

  • Encoding a redirect_uri for an OAuth flow

    OAuth wants the callback URL passed as one parameter: ?redirect_uri=https://app.example.com/cb?next=/dashboard. The inner ? and / must be component-encoded or the provider truncates at the first ?. Encode it to https%3A%2F%2Fapp.example.com%2Fcb%3Fnext%3D... and the whole callback survives the round trip.

Common pitfalls

  • Encoding the whole URL with component mode — it eats the :// and / so https://a.com becomes https%3A%2F%2Fa.com, which is no longer clickable. Use full-URL mode for whole links, component mode only for one param.

  • Forgetting that a literal + needs escaping in a query string. Sending "1+1=2" as ?eq=1+1=2 reads as "1 1=2" on the server. Component-encode it to 1%2B1%3D2 to keep the plus.

  • Decoding a value that was never encoded. Running a path like /a%b/c through decode throws on the lone %, because %b isn't a valid %xx pair. Check the string actually contains full percent-escapes first.

Privacy

Everything runs in your browser. The text you paste is encoded or decoded locally with the built-in encodeURIComponent / encodeURI functions and is never sent to any server or logged. If you turn on shareable links, the encoded result is written into the page URL so you can share it — so avoid pasting tokens, signed URLs, or anything secret while that is on.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-07-02