What is the difference between encodeURI and encodeURIComponent in JavaScript?

encodeURI is designed to encode a full Uniform Resource Identifier (URI) while preserving structural punctuation characters that have reserved syntactic meaning in URLs (such as :, /, ?, #, &, and =). In contrast, encodeURIComponent is designed to encode an individual query parameter key or value; it percent-encodes structural delimiters so that literal characters (like & or = inside a search query) are not mistaken for query string delimiters. As a best practice, use encodeURI on complete URLs and encodeURIComponent on individual parameter strings.

Why are spaces encoded as both %20 and + in web URLs?

Both representations are valid depending on the context and specification. %20 is the strict standard defined by RFC 3986 for all URI components (including path segments, query strings, and fragments). The plus sign (+) originates from the W3C HTML specification for application/x-www-form-urlencoded form data, which is standard for HTTP GET and POST form submissions and JavaScript URLSearchParams. However, in path segments (such as /files/my+doc.pdf), + represents a literal plus character, whereas /files/my%20doc.pdf represents a space.

What causes double encoding (%2520) and how do you detect and fix it?

Double encoding happens when an already percent-encoded string is passed into an encoder function a second time. The encoder encounters the percent sign (%) from sequences like %20 and re-encodes it as %25, producing %2520. This corrupts query parameter values and frequently leads to HTTP 400 Bad Request or HTTP 404 Not Found routing errors. To fix double encoding, decode the string twice or use this tool's automated detection to identify %25 patterns and restore the original text.

What is RFC 3986 strict encoding and why does AWS Signature V4 require it?

JavaScript's native encodeURIComponent follows older ECMAScript standards that leave exclamation marks (!), single quotes ('), parentheses (()), and asterisks (*) unencoded. However, modern canonical request specifications like AWS Signature Version 4 (SigV4) and OAuth 1.0 require strict RFC 3986 adherence where every character outside the unreserved set (A–Z, a–z, 0–9, -, _, ., ~) must be percent-encoded. This tool's "RFC 3986 Strict" mode ensures exact compliance with AWS and cloud authorization hashing rules.

How does JavaScript handle multi-byte UTF-8 Unicode characters and emojis in URLs?

Modern URL encoding converts non-ASCII characters and emojis into their corresponding UTF-8 byte sequences (1 to 4 bytes per character) and encodes each byte as %XX. For example, the rocket emoji (🚀) consists of four UTF-8 bytes (0xF0 0x9F 0x9A 0x80), which encodes to %F0%9F%9A%80. JavaScript strings use UTF-16 surrogate pairs for characters outside the Basic Multilingual Plane; encodeURIComponent processes valid surrogate pairs seamlessly but will throw a URIError: URI malformed if a string contains lone or mismatched surrogate code units.

How are nested objects and arrays serialized in URL query strings?

Because RFC 3986 does not specify a single standard for nested data structures, backend frameworks use different conventions: PHP and Ruby on Rails use bracket notation (filter[]=1&filter[]=2 or user[name]=John), Django and FastAPI use repeated keys (filter=1&filter=2), and OpenAPI/REST APIs often use comma-separated values (filter=1,2). When constructing query strings, ensure your serialization format matches the query parser library (such as qs or URLSearchParams) expected by your target API server.

What are reserved vs unreserved characters according to RFC 3986?

RFC 3986 divides URI characters into unreserved characters (A–Z, a–z, 0–9, hyphen -, underscore _, period ., and tilde ~) which must never be percent-encoded, and reserved characters which have special syntactic significance. Reserved characters include general delimiters (:, /, ?, #, [, ], @) and sub-delimiters (!, $, &, ', (, ), *, +, ,, ;, =). When reserved characters are used as literal data rather than structural delimiters, they must be percent-encoded.

Does URL encoding protect against Cross-Site Scripting (XSS) or SQL Injection?

No. URL encoding is purely a transport-layer serialization format to ensure characters pass safely through HTTP URI parsers without corrupting URL structure. Once the web server or application framework decodes the percent-encoded parameter back into a raw string, malicious payloads (such as or SQL fragments) can still execute if not properly sanitized, parameterized in SQL queries, or escaped with HTML entities before rendering.

How does client-side URL encoding protect sensitive API tokens and parameters?

When using this tool, all encoding, decoding, parsing, and query string manipulation runs 100% locally in your web browser using native JavaScript and Web APIs. No input text, URLs, API keys, bearer tokens, or query strings are sent across the network or logged to any remote server, ensuring complete data privacy for proprietary API endpoints and credentials.

What is the difference between URL percent-encoding and Base64 encoding?

URL percent-encoding is character-based escaping that replaces specific reserved or non-ASCII characters with %XX byte representations while leaving readable ASCII alphanumeric text intact. Base64 is a binary-to-text encoding scheme that converts arbitrary 8-bit binary data into a 64-character ASCII alphabet (A–Z, a–z, 0–9, +, /), making the original text unreadable without decoding and increasing data size by ~33%. Base64 is used for binary file transmission and JWT tokens, whereas URL encoding is used for HTTP addresses and query strings.

URL Encoder & Decoder Online — Free URL Encode & Parse Tool

DevFlow

Free online URL encoder, decoder, and query string parser. Quickly encode text and special characters for URI query parameters with encodeURIComponent or format entire URLs with encodeURI. Decode percent-encoded (%XX) strings, URL parameters, and application/x-www-form-urlencoded payloads back to clean UTF-8 text and Unicode emojis. Deconstruct and parse any full URL into protocol, host, port, path, query parameters, and hash fragments with instant key-value table inspection. Build URL query strings from key-value pairs, detect double-encoding errors, and enforce strict RFC 3986 encoding (encoding reserved characters like !'()* for AWS Signature V4). Runs 100% client-side in your browser with zero server transmission for maximum privacy.

JavaScript is required to use this interactive tool. Please enable JavaScript in your browser, or use our URL Encoder/Decoder API for programmatic access.

Browse all Web Code tools →

Popular Web Code tools

Browse all 21 Web Code tools →

URL Encoder/Decoder is also known as: URL Encoder, URL Decoder Online, Percent Encoding Tool, URL Parser Online, URI Component Encoder, Query String Parser, Query String Builder, URL Percent Decoder, RFC 3986 URL Encoder, Form URL Encoded Converter.

How to URL Encoder/Decoder Online

Paste or type any text, query parameter string, or complete URL into the input editor panel.
Select your desired operation: "Encode" (encodeURIComponent for query values), "Decode" (decode percent-encoding), "Encode URI" (encodeURI for full addresses), "Decode URI", "Parse URL" (extract structured components), "Parse Query" (tabular key-value view), or "Build Query" (construct parameters from lines).
Configure space formatting preferences: choose standard RFC 3986 %20 (recommended for APIs and path segments) or + (form-urlencoded standard for HTML forms and URLSearchParams).
Enable "RFC 3986 Strict" mode if creating cryptographic signatures (such as AWS Signature V4 or OAuth 1.0a) to percent-encode sub-delimiters !, ', (, ), and *.
Click the action button or press ⌘↵ (Ctrl+Enter on Windows/Linux) to run the transformation instantly with real-time character statistics.
When "Parse URL" or "Parse Query" is selected, inspect the structured decomposition breakdown including protocol, host, port, path, query parameters table, and hash fragment.
Review real-time double-encoding warnings if your input contains patterns like %25XX to avoid corrupted web requests.
Copy the converted output to your clipboard with ⌘⇧C, download as a text file, or generate a shareable URL for team collaboration.

URL Encoder/Decoder Features

RFC 3986 Component Encoding (encodeURIComponent): Safely escapes reserved characters, punctuation, and delimiters within individual query parameter values.
Standard Full URL Encoding (encodeURI): Encodes spaces and non-ASCII characters while preserving valid URL structure delimiters (:, /, ?, #, &, =).
RFC 3986 Strict Percent-Encoding: Enforces strict canonical encoding for AWS Signature Version 4, OAuth, and cloud API authorization by encoding !, ', (, ), and *.
Bi-Directional Percent-Decoding: Restores percent-encoded (%XX) sequences and UTF-8 octets into human-readable text and emojis with automatic error reporting.
Smart Space Handling (%20 vs +): Seamlessly switch between RFC 3986 %20 hex notation and W3C application/x-www-form-urlencoded plus sign notation.
Comprehensive URL Deconstructor & Parser: Splits full web addresses into protocol, username, password, hostname, port, pathname, search query, and anchor hash.
Interactive Query String Table: Parses query strings into an editable, sortable key-value table supporting multi-value keys and special character values.
Query String Builder: Generates properly formatted, valid query strings from newline-delimited key=value definitions.
Double-Encoding Detection & Heuristics: Automatically identifies re-encoded sequences (such as %2520) to prevent broken routes and HTTP 400 Bad Request errors.
Full Unicode & Emoji UTF-8 Multi-Byte Support: Encodes and decodes multi-byte UTF-8 sequences (CJK, Cyrillic, Arabic, mathematical symbols, and emoji surrogate pairs).
100% Client-Side In-Browser Execution: All transformations execute entirely within your browser memory using native Web APIs without sending data to any external server.
Developer Keyboard Shortcuts: Boost productivity with ⌘↵ (Run), ⌘⇧E (Force Encode), ⌘⇧D (Force Decode), ⌘⇧P (Force Parse URL), ⌘⇧K (Clear), and ⌘⇧C (Copy).
Headless API Support: Programmatically encode, decode, and parse URLs via HTTP POST /api/tools/url-encode with JSON payload schemas.

Supported Formats & Dialects

The URL Encoder/Decoder supports 6 syntax formats and dialects for accurate parsing and processing.

RFC 3986 Component Encoding (encodeURIComponent): Encodes all characters except unreserved characters (A–Z, a–z, 0–9, -, _, ., ~) and unescaped punctuation (!, ', (, ), *). Essential for isolating query parameter keys and values so delimiters like & and = are not interpreted structurally.
Standard Full URI Encoding (encodeURI): Formats complete web URLs by percent-encoding spaces and international characters while preserving structural protocol, path, and query delimiters (:, /, ?, #, &, =, @, +, $, ,).
RFC 3986 Strict Percent-Encoding (AWS SigV4 & OAuth): Strictest encoding dialect that percent-encodes every character outside [A-Za-z0-9-_.~], including !, ', (, ), and *. Mandatory for AWS Signature Version 4 canonical request hashing and OAuth 1.0 signature baselines.
application/x-www-form-urlencoded (HTML Form Data): W3C standard encoding used by HTML forms and URLSearchParams where spaces are serialized as plus signs (+) rather than %20, and alphanumeric characters plus *, -, ., _ remain unencoded.
URL Query String Parser & Deconstructor: Splits raw query strings (?k1=v1&k2=v2) into structured key-value arrays, properly decoding multi-value parameters, nested bracket keys, and percent-encoded values.
Multi-Byte UTF-8 & Emoji Percent-Encoding: Translates non-ASCII Unicode characters into their constituent 1 to 4 UTF-8 byte octets, each converted into an individual %XX hexadecimal escape sequence (e.g., 🚀 -> %F0%9F%9A%80).

All Guides

web code

Debugging Open Graph & Twitter Cards for Dynamic Social Previews

Master Open Graph protocol, Twitter Card meta tags, dynamic OG image generation, and crawler cache invalidation across Slack, Discord, Twitter/X, and LinkedIn.

Read Field Manual

web code

HTML Entity Encoding & Escaping: XSS Prevention, Unicode & Parser Nuances

Master HTML entity encoding, numeric character references, context-aware XSS escaping in body vs attributes vs JS, and HTML5 named entity parser rules.

Read Field Manual

network

HTTP Redirects Demystified: Debugging 301 vs 308, Chains, and Redirect Loops

Master HTTP 3xx status codes: 301 vs 308 permanent redirects, 302 vs 307 temporary redirects, fixing ERR_TOO_MANY_REDIRECTS loops, and optimizing redirect chains.

Read Field Manual

web code

URL Encoding & Query Strings: Mastering RFC 3986, encodeURIComponent & URLSearchParams

Demystify percent-encoding rules, avoid double-encoding pitfalls, master + vs %20 space representations, and serialize complex nested objects and arrays for REST query strings.

Read Field Manual

All Standards

Base64 EncodingEncoding

Base64 is a binary-to-text encoding algorithm that converts binary data into an ASCII string using 64 printable characters as defined in RFC 4648.

HTML Entities & Character EncodingWeb Development

HTML entities are coded character strings starting with an ampersand and ending with a semicolon used to render reserved and special characters in HTML.

OAuth 2.0 Authorization FrameworkSecurity

OAuth 2.0 (RFC 6749) is the industry-standard authorization protocol that enables third-party applications to obtain scoped access to HTTP resources on behalf of a user.

Proof Key for Code Exchange (PKCE)Security

PKCE (RFC 7636) is an OAuth 2.0 security extension that protects public and confidential clients against authorization code interception attacks using SHA-256 challenges.

QR Code (Quick Response Code)Identifiers

A QR Code is a two-dimensional matrix barcode invented by Denso Wave in 1994, standardized in ISO/IEC 18004 to store machine-readable data.

URL Encoding (Percent-Encoding)Encoding

URL encoding (percent-encoding) is an RFC 3986 mechanism that converts reserved or unsafe characters in a URI into a percent sign followed by two hex digits.

Pre-built Automation Pipelines

Chain URL Encoder/Decoder with other utilities in a multi-step visual workflow.

beginner

encoding

URL Encode/Decode

Encode or decode URL parameters safely.

Flow:

InputURL Encoder/DecoderOutput

3 nodes

intermediate

security

URL Decode → JWT Inspect

Safely decode URL-encoded JWT tokens for inspection.

Flow:

InputURL Encoder/DecoderJWT DecoderOutput

4 nodes

Frequently Asked Questions

What is the difference between encodeURI and encodeURIComponent in JavaScript?: encodeURI is designed to encode a full Uniform Resource Identifier (URI) while preserving structural punctuation characters that have reserved syntactic meaning in URLs (such as :, /, ?, #, &, and =). In contrast, encodeURIComponent is designed to encode an individual query parameter key or value; it percent-encodes structural delimiters so that literal characters (like & or = inside a search query) are not mistaken for query string delimiters. As a best practice, use encodeURI on complete URLs and encodeURIComponent on individual parameter strings.
Why are spaces encoded as both %20 and + in web URLs?: Both representations are valid depending on the context and specification. %20 is the strict standard defined by RFC 3986 for all URI components (including path segments, query strings, and fragments). The plus sign (+) originates from the W3C HTML specification for application/x-www-form-urlencoded form data, which is standard for HTTP GET and POST form submissions and JavaScript URLSearchParams. However, in path segments (such as /files/my+doc.pdf), + represents a literal plus character, whereas /files/my%20doc.pdf represents a space.
What causes double encoding (%2520) and how do you detect and fix it?: Double encoding happens when an already percent-encoded string is passed into an encoder function a second time. The encoder encounters the percent sign (%) from sequences like %20 and re-encodes it as %25, producing %2520. This corrupts query parameter values and frequently leads to HTTP 400 Bad Request or HTTP 404 Not Found routing errors. To fix double encoding, decode the string twice or use this tool's automated detection to identify %25 patterns and restore the original text.
What is RFC 3986 strict encoding and why does AWS Signature V4 require it?: JavaScript's native encodeURIComponent follows older ECMAScript standards that leave exclamation marks (!), single quotes ('), parentheses (()), and asterisks (*) unencoded. However, modern canonical request specifications like AWS Signature Version 4 (SigV4) and OAuth 1.0 require strict RFC 3986 adherence where every character outside the unreserved set (A–Z, a–z, 0–9, -, _, ., ~) must be percent-encoded. This tool's "RFC 3986 Strict" mode ensures exact compliance with AWS and cloud authorization hashing rules.
How does JavaScript handle multi-byte UTF-8 Unicode characters and emojis in URLs?: Modern URL encoding converts non-ASCII characters and emojis into their corresponding UTF-8 byte sequences (1 to 4 bytes per character) and encodes each byte as %XX. For example, the rocket emoji (🚀) consists of four UTF-8 bytes (0xF0 0x9F 0x9A 0x80), which encodes to %F0%9F%9A%80. JavaScript strings use UTF-16 surrogate pairs for characters outside the Basic Multilingual Plane; encodeURIComponent processes valid surrogate pairs seamlessly but will throw a URIError: URI malformed if a string contains lone or mismatched surrogate code units.
How are nested objects and arrays serialized in URL query strings?: Because RFC 3986 does not specify a single standard for nested data structures, backend frameworks use different conventions: PHP and Ruby on Rails use bracket notation (filter[]=1&filter[]=2 or user[name]=John), Django and FastAPI use repeated keys (filter=1&filter=2), and OpenAPI/REST APIs often use comma-separated values (filter=1,2). When constructing query strings, ensure your serialization format matches the query parser library (such as qs or URLSearchParams) expected by your target API server.
What are reserved vs unreserved characters according to RFC 3986?: RFC 3986 divides URI characters into unreserved characters (A–Z, a–z, 0–9, hyphen -, underscore _, period ., and tilde ~) which must never be percent-encoded, and reserved characters which have special syntactic significance. Reserved characters include general delimiters (:, /, ?, #, [, ], @) and sub-delimiters (!, $, &, ', (, ), *, +, ,, ;, =). When reserved characters are used as literal data rather than structural delimiters, they must be percent-encoded.
Does URL encoding protect against Cross-Site Scripting (XSS) or SQL Injection?: No. URL encoding is purely a transport-layer serialization format to ensure characters pass safely through HTTP URI parsers without corrupting URL structure. Once the web server or application framework decodes the percent-encoded parameter back into a raw string, malicious payloads (such as <script> or SQL fragments) can still execute if not properly sanitized, parameterized in SQL queries, or escaped with HTML entities before rendering.
How does client-side URL encoding protect sensitive API tokens and parameters?: When using this tool, all encoding, decoding, parsing, and query string manipulation runs 100% locally in your web browser using native JavaScript and Web APIs. No input text, URLs, API keys, bearer tokens, or query strings are sent across the network or logged to any remote server, ensuring complete data privacy for proprietary API endpoints and credentials.
What is the difference between URL percent-encoding and Base64 encoding?: URL percent-encoding is character-based escaping that replaces specific reserved or non-ASCII characters with %XX byte representations while leaving readable ASCII alphanumeric text intact. Base64 is a binary-to-text encoding scheme that converts arbitrary 8-bit binary data into a 64-character ASCII alphabet (A–Z, a–z, 0–9, +, /), making the original text unreadable without decoding and increasing data size by ~33%. Base64 is used for binary file transmission and JWT tokens, whereas URL encoding is used for HTTP addresses and query strings.

Developer Reference & Learning Hubs

Developer Guides

In-depth technical tutorials, debugging guides, and best practices.

Technical Glossary

Authoritative definitions for RFC standards, formats, and protocols.

AI Models Directory

Verified per-token API pricing, rate cards, and benchmarks across LLMs.

URL Encoder & Decoder Online — Free URL Encode & Parse Tool