URL Encode & Decode

How to URL encode and decode online

jsonsql.dev encodes and decodes URLs using JavaScript's encodeURIComponent() and encodeURI() — with a built-in URL parser, query string builder, batch multi-line mode, and a percent-encoding reference table covering all RFC 3986 reserved characters. 100% client-side — no data leaves your browser.

Example

Encoding a query parameter value:

Input:  Hello World! How are you? price=$100&tax=10%
Output: Hello%20World!%20How%20are%20you%3F%20price%3D%24100%26tax%3D10%25

Decoding a URL:

Input:  https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den
Output: https://example.com/search?q=hello world&lang=en

Parsing a full URL into parts:

URL: https://example.com:8080/api/search?q=hello+world&limit=10#results

Protocol: https:
Host:     example.com:8080
Port:     8080
Path:     /api/search
Query:    ?q=hello+world&limit=10
Fragment: #results

Query Parameters:
  q     = hello+world
  limit = 10

Features

• Encode text using encodeURIComponent() for safe URL query parameter values
• Decode percent-encoded strings using decodeURIComponent()
• Full URL encode option: encode an entire URL with encodeURI(), preserving ://, /, ?, &, =, and #
• Parse any URL into protocol, host, port, path, query parameters, and fragment
• Query string builder: add key-value pairs and generate an encoded query string
• Common encoded characters reference table
• Batch mode: encode or decode multiple lines at once
• Dark and light theme support
• Works offline — no internet needed after the page loads

What is URL encoding (percent-encoding)

URL encoding (percent-encoding) replaces unsafe characters with a percent sign followed by two hexadecimal digits — for example, a space becomes %20. This ensures URLs are transmitted correctly across all systems.

The standard is defined in RFC 3986 (Uniform Resource Identifier: Generic Syntax). URLs can only contain a limited set of characters from the US-ASCII character set. Characters outside this set — including spaces, non-ASCII characters, and characters that have special meaning in URL syntax — must be percent-encoded before they can appear in a URL.

The encoding process works by taking each unsafe character, converting it to one or more bytes (using UTF-8 for non-ASCII characters), and representing each byte as %HH where HH is the two-digit hexadecimal value. For example:

• Space (ASCII 32) → %20 (32 in hex is 20)
• Ampersand (ASCII 38) → %26 (38 in hex is 26)
• e with accent (UTF-8: 0xC3 0xA9) → %C3%A9

RFC 3986 divides characters into two categories:

• Unreserved characters (never need encoding): A-Z a-z 0-9 - . _ ~
• Reserved characters (have special meaning in URLs): : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Reserved characters must be percent-encoded when they are used outside their reserved purpose — for example, when a literal & appears inside a query parameter value rather than as a parameter separator.

URL encoding reference table

The following table lists commonly encoded characters, their percent-encoded form, and their ASCII code. Bookmark this page as a quick reference for URL encoding.

encodeURI vs encodeURIComponent

Use encodeURIComponent() for query parameter values and encodeURI() for complete URLs. Using the wrong function is the most common URL encoding mistake.

JavaScript provides two built-in functions for URL encoding, and choosing the right one is critical:

Example — encoding a search query:

// CORRECT: encode only the parameter value
const query = 'price > $100 & tax = 10%'
const url = 'https://api.example.com/search?q=' + encodeURIComponent(query)
// Result: https://api.example.com/search?q=price%20%3E%20%24100%20%26%20tax%20%3D%2010%25

// WRONG: encodeURI would NOT encode & and =, breaking the URL
const bad = encodeURI('https://api.example.com/search?q=' + query)
// Result: https://api.example.com/search?q=price%20%3E%20$100%20&%20tax%20=%2010%25
// The & is preserved, creating an unintended second parameter

Rule of thumb: If you are encoding a value that goes inside a URL, use encodeURIComponent(). If you have a complete URL that just needs non-ASCII characters encoded, use encodeURI().

URL structure explained

Understanding URL anatomy helps you know which parts need encoding and which do not. A complete URL follows this structure:

  protocol://userinfo@host:port/path?query=value&key=value#fragment
  \______/   \______/ \__/ \__/ \__/ \___________________/ \______/
   scheme    username  host port path    query string      fragment

Each component has different encoding rules:

• Protocol/scheme (https:) — never encoded, always lowercase
• Host (example.com) — internationalized domain names use Punycode, not percent-encoding
• Port (:8080) — numeric, never encoded
• Path (/api/search) — each segment is individually encoded; / separators are preserved
• Query string (?q=hello&limit=10) — keys and values are encoded individually; ?, &, and = are structural and preserved
• Fragment (#results) — encoded like a path segment; the leading # is preserved

The query string is the most common place where encoding errors occur. Each parameter value must be encoded with encodeURIComponent() to prevent characters like &, =, and # from being interpreted as URL structure.

URL encoding in different programming languages

Every language has built-in functions for URL encoding. Here are the most common ones:

JavaScript:

// Encode a query parameter value
const encoded = encodeURIComponent('hello world & more')
// Result: 'hello%20world%20%26%20more'

// Decode
const decoded = decodeURIComponent('hello%20world%20%26%20more')
// Result: 'hello world & more'

// Build query string with URLSearchParams (auto-encodes)
const params = new URLSearchParams({ q: 'hello world', page: '1' })
params.toString() // 'q=hello+world&page=1'

Python:

from urllib.parse import quote, unquote, urlencode

# Encode a component (like encodeURIComponent)
encoded = quote('hello world & more')
# Result: 'hello%20world%20%26%20more'

# Decode
decoded = unquote('hello%20world%20%26%20more')
# Result: 'hello world & more'

# Build query string
query = urlencode({'q': 'hello world', 'page': '1'})
# Result: 'q=hello+world&page=1'

Java:

import java.net.URLEncoder;
import java.net.URLDecoder;

// Encode (note: uses + for spaces, form-encoded style)
String encoded = URLEncoder.encode("hello world & more", "UTF-8");
// Result: "hello+world+%26+more"

// Decode
String decoded = URLDecoder.decode("hello+world+%26+more", "UTF-8");
// Result: "hello world & more"

PHP:

// urlencode() — uses + for spaces (form-encoded)
echo urlencode('hello world & more');
// Result: hello+world+%26+more

// rawurlencode() — uses %20 for spaces (RFC 3986)
echo rawurlencode('hello world & more');
// Result: hello%20world%20%26%20more

// urldecode() / rawurldecode() for decoding
echo urldecode('hello+world+%26+more');
// Result: hello world & more

Command line:

# Python one-liner
python3 -c "import urllib.parse; print(urllib.parse.quote('hello world & more'))"
# Result: hello%20world%20%26%20more

# Using curl with --data-urlencode
curl -G --data-urlencode "q=hello world & more" https://api.example.com/search

URL Encode/Decode vs other tools

Related tools

Frequently asked questions