{"id":103,"date":"2026-05-04T19:21:29","date_gmt":"2026-05-04T23:21:29","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=103"},"modified":"2026-05-04T19:21:29","modified_gmt":"2026-05-04T23:21:29","slug":"url-encoder-decoder","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/url-encoder-decoder\/","title":{"rendered":"URL Encoder\/Decoder: Percent-Encode Safely [2026]"},"content":{"rendered":"
TL;DR:<\/strong> URL encoding (also called percent-encoding) replaces unsafe characters in a URL with %XX<\/code> hexadecimal escapes \u2014 for example, a space becomes %20<\/code>, an ampersand becomes %26<\/code>. Use it on query string values<\/em> and path segments<\/em>, not the whole URL. Our free URL encoder\/decoder<\/a> handles component-only and full-URL modes, fixes double-encoded strings, and is UTF-8 safe.<\/div>\n

URLs are constrained to a small set of ASCII characters. Anything else \u2014 spaces, accented letters, emoji, ampersands, plus signs, slashes inside a parameter value \u2014 must be percent-encoded so it survives transport through proxies, caches, and the URL parser at the destination server. Get the encoding wrong and your ?q=hello world<\/code> becomes a mangled ?q=hello<\/code> followed by an unparseable world<\/code> token. Get the decoding<\/em> wrong and a URL that contains a literal +<\/code> shows up as a space.<\/p>\n

Our URL encoder and decoder<\/a> covers both directions, distinguishes between component encoding (for query values and path segments) and full-URL encoding (for entire links), and detects double-encoded strings so you can recover the original cleanly. This guide explains exactly which characters need encoding under RFC 3986, when to use encodeURIComponent<\/code> vs encodeURI<\/code> in JavaScript, and the gotchas that produce subtle bugs in production.<\/p>\n

Reserved vs unreserved characters in RFC 3986<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Category<\/th>\nCharacters<\/th>\nEncode in component?<\/th>\n<\/tr>\n<\/thead>\n
Unreserved<\/strong><\/td>\nA-Z a-z 0-9 - _ . ~<\/code><\/td>\nNever<\/td>\n<\/tr>\n
Reserved (gen-delims)<\/strong><\/td>\n: \/ ? # [ ] @<\/code><\/td>\nYes, in component<\/td>\n<\/tr>\n
Reserved (sub-delims)<\/strong><\/td>\n! $ & ' ( ) * + , ; =<\/code><\/td>\nYes, in component<\/td>\n<\/tr>\n
Space<\/strong><\/td>\n(space)<\/code><\/td>\nAlways \u2014 to %20<\/code> or +<\/code> in form data<\/td>\n<\/tr>\n
Other ASCII<\/strong><\/td>\n\" < > \\ ^ ` { | }<\/code><\/td>\nAlways<\/td>\n<\/tr>\n
Non-ASCII (UTF-8)<\/strong><\/td>\n\u00e9, \u00fc, \u4e2d, \ud83c\udf89<\/code><\/td>\nAlways \u2014 encoded byte-by-byte from UTF-8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Component encoding vs full-URL encoding<\/h2>\n

The most common mistake is encoding the entire URL when you should be encoding just one part of it. encodeURI<\/code> in JavaScript is for whole URLs and preserves<\/em> reserved characters like ?<\/code>, &<\/code>, #<\/code>, and \/<\/code> because they have structural meaning. encodeURIComponent<\/code> is for individual query values, path segments, or form fields and does<\/em> encode those reserved characters because at that level they are just data.<\/p>\n