About this tool
URL Encoder & Parser is a free text and code tool that runs entirely in your web browser. The Encode / Decode panel percent-encodes or decodes any string, with a Whole-URL toggle that switches between encodeURIComponent (single values) and encodeURI (complete URLs). The URL Parser breaks any link into its components: protocol, hostname, port, path, query and fragment, and lists each query parameter as an editable row that rebuilds the URL live. Because everything happens locally on your device, nothing you paste is uploaded, there is no sign-up, and it keeps working offline. Like every HeroTool by Digital Heroes, it is 100% free with no limits.
encodeURIComponent vs encodeURI: which mode for which job
encodeURIComponent: for parameter values. The default. Use it when the input is a single value going into a URL slot: a query parameter value, a path segment, a fragment identifier. It escapes / : ? & = # so a value containing those characters does not break URL parsing. The most common need: encoding a search query that may contain ampersands or slashes before appending it to a URL.
encodeURI: for whole URLs. Tick the Whole-URL toggle when the input is already a complete URL with correct structure but might contain spaces or unicode. It preserves / : ? & = # so the structure stays parseable. Do not use it on parameter values; it will leave the structural characters unescaped and break the parse. Most useful for fixing a URL with spaces in the path that should have been escaped at the source.
Space as plus: a form-submission convention. The application/x-www-form-urlencoded format used by classic HTML form submission encodes space as + instead of %20. This tool always encodes space as %20, the universally safe RFC 3986 form. When decoding a form-encoded string, swap each + for %20 first if you need the spaces back; the decoder treats a literal + as a plus sign.
Reference: common percent-encodings
space → %20 · ! → %21 · # → %23 · $ → %24 · % → %25 · & → %26 · ' → %27 · ( → %28 · ) → %29 · * → %2A · + → %2B · , → %2C · / → %2F · : → %3A · ; → %3B · = → %3D · ? → %3F · @ → %40 · [ → %5B · ] → %5D
Per RFC 3986. Unreserved characters (A-Z, a-z, 0-9, hyphen, underscore, period, tilde) are never escaped.
Five jobs this tool covers
Job 1: Inspect a tracking URL. Paste a long marketing URL with multiple UTM parameters and a referrer URL embedded in another parameter into the URL Parser. It breaks the link into a clean component table plus a key / value list with every value pre-decoded. Faster than reading %26%3D%2F sequences in a long URL by eye.
Job 2: Build a search-query URL. Take a phrase that may contain ampersands, slashes or quotes, for example "red shoes" size 10 & under $50, encode it in the default mode, and drop it into a search URL slot. The result is the safe value Google, Amazon or your own site search would use to send that exact query. Pair with our UTM Builder for the marketing-tagging side.
Job 3: Decode an OAuth redirect. OAuth flows return tokens, scopes and state in the query string, usually URL-encoded. Paste the redirect URL into the parser and each parameter surfaces cleanly. Useful for debugging why an access token comes back malformed and finding where the encoding went wrong.
Job 4: Clean up a copy-pasted URL. Some chat apps and email clients double-encode URLs when you paste them. Paste the over-encoded URL, hit Decode, and you will see the original. If decoding produces a still-encoded string (%2520 becomes %20 becomes a space), press the Use result as input button and decode again. Three passes usually clear any layered encoding.
Job 5: Edit a query string without breaking it. In the parser, every query parameter is an editable row. Change a value, add a parameter or remove one, and the rebuilt URL updates live, correctly encoded and ready to copy. No more careful cursor surgery inside a 400-character link.
Frequently asked questions
What's the difference between encodeURIComponent and encodeURI?
encodeURI preserves URL-structural characters (slash, colon, hash, question mark, ampersand) so it is safe to use on a complete URL: the structure stays parseable. encodeURIComponent escapes all reserved URI characters including slash and ampersand, so it is safe to use on a single parameter value that could contain them. Use encodeURI (the Whole-URL toggle here) for full URLs that already have correct structure but need spaces and unicode escaped. Use encodeURIComponent for individual query-parameter values, fragment identifiers, or any string going into a URL slot. The wrong choice causes the most common URL bug: an ampersand inside a parameter value being read as a parameter separator.
Why does space encode as %20 sometimes and + other times?
Two encodings, both legal in different contexts. RFC 3986 (the URI standard) says space should be %20, which is universally safe in URLs. The application/x-www-form-urlencoded spec used in HTML form submission encodes space as +. Most server-side parsers handle both, but +-as-space is only correct in the query-string portion of a URL, not in the path. This tool always encodes space as %20 because it is the universally correct form. When decoding a form-encoded string, swap each + for %20 first; the decoder treats a literal + as a plus sign.
How does the URL Parser work?
Switch to URL Parser mode and paste a link. The browser's URL API splits it into protocol, username, hostname, port, path, query and fragment, shown in the Components table. Each query parameter appears as an editable key and value row with the value pre-decoded; repeated keys (?tag=a&tag=b) show as separate rows. Edit, add or remove a row and the rebuilt URL updates live, ready to copy. If you paste a URL without a scheme, the parser retries with https:// in front before reporting an error.
What characters get escaped?
Per RFC 3986, the reserved characters are gen-delims (: / ? # [ ] @) and sub-delims (! $ & ' ( ) * + , ; =). Unreserved characters (A-Z, a-z, 0-9, hyphen, underscore, period, tilde) are never escaped. Anything outside the ASCII printable range (unicode) is always escaped. encodeURI keeps the gen-delims and sub-delims unescaped so URL structure survives; encodeURIComponent escapes all reserved characters except the unreserved set. The reference table above lists the encodings for common characters.
Will this handle internationalized domain names (IDN)?
The encode and decode modes percent-encode the path and query parts but do not convert the hostname. The URL Parser uses the browser's URL API, which normalizes a unicode hostname to its Punycode form, so pasting a link on münchen.de shows xn--mnchen-3ya.de in the hostname row. If you need to convert a unicode hostname to Punycode in your own code, use Node's built-in url.domainToASCII or any Punycode library.
Is the URL I paste sent anywhere?
No. The tool uses the browser's native encodeURIComponent / decodeURIComponent and URL APIs, all running client-side in this static page. Nothing you type or paste is transmitted or logged. Safe for URLs containing API keys, tokens or session identifiers in the query string.