URL Encoder/Decoder – encodeURIComponent, URL Breakdown & Query Builder (Free Tool)

URL Encoder / Decoder

Encode, decode, and dissect URLs right in your browser: devnestio.pages.dev/url-encoder/

No server, no tracking — everything runs locally.

Four Modes

1. encodeURIComponent

Encode individual values for use inside query strings. &, =, ?, /, #, and spaces all get encoded:

hello world → hello%20world
a=b&c=d    → a%3Db%26c%3Dd

2. encodeURI

Encode a full URL while preserving structural characters (://, /, ?, &, =, #):

https://example.com/path?q=hello world
→ https://example.com/path?q=hello%20world

3. URL Breakdown

Paste any URL to see it split into its parts:

• protocol, host, hostname, port
• pathname, search, hash, origin
• Individual query parameters in a table

4. Query String Builder

Add key/value pairs and get a ready-to-use query string with proper encoding:

foo = hello world  →  ?foo=hello%20world
bar = a&b          →  ?foo=hello%20world&bar=a%26b

Key Functions

function encodeText(text, mode) {
  if (mode === 'component') return encodeURIComponent(text);
  return encodeURI(text);
}

function decodeText(text, mode) {
  try {
    if (mode === 'component') return decodeURIComponent(text);
    return decodeURI(text);
  } catch { return text; } // invalid %XX — return as-is
}

URL breakdown uses the native URL API:

const url = new URL(input);
// url.protocol, url.hostname, url.pathname, url.searchParams...

encodeURIComponent vs encodeURI

Character	encodeURIComponent	encodeURI
Space	%20	%20
/	%2F	preserved
?	%3F	preserved
&	%26	preserved
#	%23	preserved
:	%3A	preserved

Rule of thumb: use encodeURIComponent for values, encodeURI for full URLs.

Try It

devnestio.pages.dev/url-encoder/

---

Part of the DevNestio developer tools collection.