Skip to main content
WebCraft Kit
Dev & Data Updated

URL Encoder / Decoder & Query Parameter Parser

Encode and decode percent-encoded URLs, parse complex query strings into structured key-value tables, and format URI components per RFC 3986.

RFC 3986 percent-encoding and decoding for full URLs and individual query parameters
Interactive Query Parameter Parser with add, edit, delete, and duplicate key capabilities
Clear distinction between `encodeURI` (full address) and `encodeURIComponent` (parameter value)
Automatic decomposition of protocol, hostname, port, pathname, search params, and hash fragments
Bulk URL parameter export to JSON and formatted query string builder
Sponsored Ad Zone

Clean, non-intrusive developer tools sponsor zone. Zero cumulative layout shift.

Comprehensive Technical Manual

The Definitive Guide to URL Percent-Encoding and Query String Parsing

In-depth specifications, architectural mechanics, real-world code implementations, and industry best practices.

01

URI Architecture & RFC 3986 Reserved vs Unreserved Characters

Uniform Resource Identifiers (URIs) are governed by RFC 3986. Because URIs must travel across heterogeneous networks and legacy gateways safely, character sets are divided into unreserved characters (A-Z, a-z, 0-9, "-", "_", ".", "~") which are never encoded, and reserved characters (":", "/", "?", "#", "[", "]", "@", "!", "$", "&", "'", "(", ")", "*", "+", ",", ";", "=") which serve as structural syntax delimiters. Any reserved character used as literal data within a parameter must be percent-encoded (%HH hex representation).

Implementation Example 
// URL Component Breakdown (RFC 3986)
// https://user:pass@example.com:8080/path/to/resource?query=param#fragment
// |___|   |_______| |_________| |__| |_______________| |_________| |______|
// scheme  userinfo     host     port      path            query     fragment
02

`encodeURI()` vs `encodeURIComponent()`: Common Pitfalls

  • • JavaScript provides two built-in encoding functions with different scopes:
  • • encodeURI() is intended for entire URLs. It preserves structural delimiters like "https://", "/", and "?", encoding only invalid characters like spaces or non-ASCII characters.
  • • encodeURIComponent() encodes every reserved character (converting "/", "?", "&", "=" to %2F, %3F, %26, %3D). It must be used when encoding individual query parameter values to prevent parameters from breaking the parent URL query string.
Implementation Example 
const queryParam = 'shoes & shirts / red';

// ❌ Wrong: encodeURI leaves '&' and '/' intact, breaking URL parsing
const badUrl = `https://api.shop.com/search?q=${encodeURI(queryParam)}`;
// => https://api.shop.com/search?q=shoes%20&%20shirts%20/%20red

// ✅ Correct: encodeURIComponent safely escapes all delimiters
const goodUrl = `https://api.shop.com/search?q=${encodeURIComponent(queryParam)}`;
// => https://api.shop.com/search?q=shoes%20%26%20shirts%20%2F%20red
03

Working with `URLSearchParams` in Modern TypeScript

Modern web development relies on the standard URL and URLSearchParams APIs rather than manual string splitting. URLSearchParams handles multi-value keys, automatic encoding/decoding, sorting, and JSON conversion effortlessly.

Implementation Example 
// Constructing and manipulating query parameters
const params = new URLSearchParams({
  page: '1',
  filter: 'active',
});

params.append('tag', 'typescript');
params.append('tag', 'web'); // Multi-value key

console.log(params.toString());
// => page=1&filter=active&tag=typescript&tag=web

console.log(params.getAll('tag')); // ['typescript', 'web']
04

Handling Spaces: `%20` vs `+` in Application Forms

Developers frequently encounter both %20 and + representing spaces in URLs. Under RFC 3986, %20 is the official percent-encoding for a space character. However, historical HTML form submissions (application/x-www-form-urlencoded) encode spaces as +. When parsing query strings on servers, + is decoded to spaces in search queries, while %20 is preserved in path segments.

Implementation Example 
// Safe space normalization
function normalizeQuerySpaces(rawUrl: string): string {
  return rawUrl.replace(/\+/g, '%20');
}
Knowledge Base & Clarifications

Frequently Asked Questions: URL Encoder

Got questions about how URL Encoder operates, client-side cryptographic safety, or performance limits? Explore common answers below.

Complementary Utilities

Related Developer Tools

View all in Dev & Data →
Dev & Data Popular

Base64 Tool

Encode and decode UTF-8 text or drop binary files to generate Base64 data URIs.

Open Tool →
Dev & Data Popular

JSON Formatter

Format, validate, beautify, and inspect JSON with custom indentation and tree view.

Open Tool →
Dev & Data Essential

Hash Generator

Compute MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes instantly using Web Crypto.

Open Tool →
Dev & Data Updated

Regex Tester

Test JavaScript regular expressions with real-time capture group highlighting.

Open Tool →