URL Encode

URL Encode Text Online

Convert any text into a URL-safe format instantly with our free online url encode tool. Whether you are building query strings, encoding form data, or preparing special characters for safe transmission in web addresses, percent encoding is an essential operation in web development. This tool applies encodeURIComponent logic to your input, replacing unsafe characters with their percent-encoded equivalents so your data travels safely across the internet.

What Is URL Encoding

URL encoding, also known as percent encoding, is the process of converting characters that are not allowed in a URL into a format that can be safely transmitted. Each unsafe character is replaced with a percent sign followed by two hexadecimal digits representing the character's byte value in UTF-8. For example, a space becomes %20, an ampersand becomes %26, and a question mark becomes %3F. This mechanism ensures that special characters do not interfere with the structure of the URL itself.

The need for url encode operations stems from the URI specification defined in RFC 3986. URLs can only contain a restricted set of ASCII characters known as unreserved characters: uppercase and lowercase letters A through Z, digits 0 through 9, and four special characters (hyphen, period, underscore, and tilde). Every other character, including spaces, punctuation marks, and all non-ASCII characters like accented letters, Chinese characters, or emoji, must be percent-encoded before appearing in a URL.

There are two primary encoding functions in JavaScript that handle percent encoding differently. The encodeURIComponent function encodes all characters except unreserved characters, making it suitable for encoding individual query parameter values and path segments. The encodeURI function is less aggressive, preserving characters that have structural meaning in URLs such as colons, slashes, question marks, and ampersands. Understanding which function to use is critical: encodeURIComponent is the correct choice for encoding data values, while encodeURI is appropriate for encoding a complete URL where the structural characters should remain intact.

The percent encoding mechanism also supports the application/x-www-form-urlencoded format used by HTML forms. In this format, spaces are represented as plus signs instead of %20, and the encoding rules differ slightly from standard percent encoding. When submitting form data via POST requests, browsers automatically apply this encoding. For decoding percent-encoded strings back to their original form, our URL decode converter reverses the process seamlessly.

How the URL Encode Works

The url encode process scans the input string character by character. For each character, the encoder checks whether it belongs to the set of unreserved characters that can appear directly in a URL. If the character is unreserved (a letter, digit, hyphen, period, underscore, or tilde), it passes through unchanged. If the character is anything else, it is converted to its UTF-8 byte representation and each byte is expressed as a percent sign followed by two uppercase hexadecimal digits.

For ASCII characters, the encoding is straightforward since each character maps to a single byte. A space (byte value 0x20) becomes %20, an exclamation mark (0x21) becomes %21, and a hash sign (0x23) becomes %23. For non-ASCII characters, the process involves multiple bytes. The Euro sign, for instance, is encoded in UTF-8 as three bytes (0xE2, 0x82, 0xAC), which produces the percent-encoded sequence %E2%82%AC. Chinese, Japanese, and Korean characters typically require three bytes each, while emoji characters require four bytes.

URL encoding is closely related to other encoding schemes used in web development. For encoding text that will appear within HTML markup, the HTML entity encoding tool handles characters like angle brackets and ampersands. When you need to create clean, URL-friendly identifiers from titles or headings, our text to slug converter produces lowercase hyphenated strings. For binary-safe encoding of arbitrary data, online Base64 encoding tool provides an alternative approach that converts entire byte sequences into a text-safe alphabet.

Syntax Comparison

Understanding how URL encoding compares to other encoding methods helps you choose the right tool for each situation. Here is the same text represented in different encoding formats:

Original text: Hello World! Price is $50 & tax included

URL encoded (encodeURIComponent): Hello%20World!%20Price%20is%20%2450%20%26%20tax%20included

URL encoded (form data): Hello+World%21+Price+is+%2450+%26+tax+included

HTML encoded: Hello World! Price is $50 & tax included

Base64 encoded: SGVsbG8gV29ybGQhIFByaWNlIGlzICQ1MCAmIHRheCBpbmNsdWRlZA==

Notice that percent encoding targets only characters that are unsafe or reserved in URLs. The encodeURIComponent function encodes the dollar sign and ampersand because they have special meaning in URL syntax, but leaves the exclamation mark untouched since it is not a reserved character in RFC 3986. HTML encoding focuses on a different set of characters entirely, targeting those with special meaning in HTML markup rather than URLs.

Common Use Cases

URL encoding is essential in many web development and data transmission scenarios. Here are the most important contexts where percent encoding is required:

Building Query Strings: When constructing URLs with query parameters, each parameter value must be URL-encoded to prevent special characters from breaking the URL structure. A search query containing "cats & dogs" must be encoded as "cats%20%26%20dogs" so the ampersand is not interpreted as a parameter separator. Using encodeURIComponent on each value before assembling the query string ensures that the URL remains valid regardless of what characters the user enters.

Form Data Submission: HTML forms with the default enctype of application/x-www-form-urlencoded automatically percent-encode all field values before sending them to the server. Spaces are converted to plus signs, and special characters are percent-encoded. When building custom form handlers or AJAX requests, you need to apply the same encoding manually using encodeURIComponent or equivalent functions to ensure the server receives properly formatted data.

API Request Parameters: REST APIs frequently require URL-encoded parameters in both GET query strings and POST request bodies. OAuth authentication flows, for example, require precise percent encoding of callback URLs, tokens, and signatures. A single unencoded character can cause authentication failures or data corruption. Many HTTP client libraries handle encoding automatically, but understanding the process is essential for debugging API integration issues.

Internationalized URLs: When URLs contain non-ASCII characters such as accented letters, Chinese characters, or Arabic script, every non-ASCII character must be percent-encoded. A URL path containing the French word "resume" with accents becomes "r%C3%A9sum%C3%A9" after encoding. Internationalized Domain Names (IDNs) use a separate encoding called Punycode for the domain portion, but path segments and query parameters rely on standard percent encoding.

Embedding Data in URLs: Single-page applications and tracking systems often embed structured data in URL fragments or query parameters. JSON objects, configuration strings, and state information must be URL-encoded before being placed in a URL. This ensures that characters like curly braces, colons, and quotes do not break the URL structure. The encoded data can then be extracted and decoded on the receiving end to reconstruct the original information.

URL Encode Examples

Here are practical examples demonstrating URL encoding in various scenarios:

Example 1 - Encoding spaces:

Input: hello world

Output: hello%20world

Example 2 - Encoding special characters:

Input: price=50&currency=USD

Output: price%3D50%26currency%3DUSD

Example 3 - Encoding a full URL as a parameter value:

Input: https://example.com/search?q=test

Output: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

Example 4 - Encoding non-ASCII characters:

Input: cafe latte

Output: caf%C3%A9%20latt%C3%A9 (with accented characters encoded)

Example 5 - Encoding JSON data for a query parameter:

Input: {"name":"John","age":30}

Output: %7B%22name%22%3A%22John%22%2C%22age%22%3A30%7D

In programming languages, URL encoding is available through built-in functions. JavaScript provides encodeURIComponent() and encodeURI(). Python offers urllib.parse.quote() and quote_plus(). In PHP, the functions are urlencode() and rawurlencode(). Java provides URLEncoder.encode() in the java.net package. Our online tool performs the same encodeURIComponent operation instantly without writing any code.

Frequently Asked Questions

What is the difference between encodeURI and encodeURIComponent?

The encodeURI function encodes a complete URI but preserves characters that have structural meaning in URLs, including colons, forward slashes, question marks, hash signs, and ampersands. The encodeURIComponent function encodes everything except unreserved characters, including those structural characters. Use encodeURI when you want to encode a full URL while keeping its structure intact. Use encodeURIComponent when you want to encode an individual parameter value or path segment where reserved characters should be treated as literal data rather than URL delimiters.

Why do spaces become %20 instead of plus signs?

The percent encoding standard defined in RFC 3986 specifies that spaces should be encoded as %20. The plus sign convention for spaces comes from a different specification, the application/x-www-form-urlencoded format used by HTML form submissions. Both representations are valid but serve different contexts. The encodeURIComponent function in JavaScript produces %20 for spaces, which is correct for URL path segments and most query parameters. The plus sign convention is primarily used when submitting HTML form data. Our tool uses the %20 convention by default, following the RFC 3986 standard.

What is double URL encoding?

Double URL encoding occurs when an already-encoded string is encoded a second time. For example, a space first becomes %20, and then the percent sign in %20 gets encoded as %25, producing %2520. This typically happens when data passes through multiple encoding layers, such as a client encoding a value that a middleware or server framework encodes again. Double encoding can cause bugs where the server receives literal percent sequences instead of the intended characters. To avoid this, ensure you encode data exactly once at the point where it enters the URL.

Is URL encoding the same as HTML encoding?

No, URL encoding and HTML encoding are completely different processes that serve different purposes. URL encoding converts characters to percent-encoded sequences like %20 and %26 for safe inclusion in URLs. HTML encoding converts characters to HTML entities like & and < for safe inclusion in HTML markup. A string destined for a URL within an HTML attribute may need both encodings applied: first URL-encode the value, then HTML-encode the entire URL when placing it in an href attribute. Using the wrong encoding type can lead to security vulnerabilities like cross-site scripting or broken links.

Which characters does encodeURIComponent not encode?

The encodeURIComponent function leaves the following characters unencoded: uppercase and lowercase letters A through Z, digits 0 through 9, and four special characters: hyphen (-), period (.), underscore (_), and tilde (~). These are the unreserved characters defined in RFC 3986. Every other character, including commonly used ones like spaces, exclamation marks, asterisks, parentheses, and single quotes, is percent-encoded. Note that the older RFC 2396 considered some additional characters as unreserved, which is why different implementations may produce slightly different results for characters like the exclamation mark or asterisk.

How does URL encoding handle Unicode characters?

URL encoding handles Unicode characters by first converting them to their UTF-8 byte representation, then percent-encoding each byte individually. A single Unicode character may produce two, three, or four percent-encoded bytes depending on its code point. For example, the German umlaut character is two bytes in UTF-8, producing two percent-encoded sequences. Chinese characters are typically three bytes, producing three sequences. Emoji characters are four bytes in UTF-8, resulting in four percent-encoded sequences like %F0%9F%98%80 for a grinning face. The UTF-8 encoding standard is specified by RFC 3986 and the WHATWG URL specification as the required character encoding for percent encoding.

When should I use URL encoding versus Base64 encoding?

URL encoding and Base64 encoding serve different purposes. URL encoding is designed specifically for making text safe within URLs by encoding only the characters that are problematic. Base64 encoding converts arbitrary binary data into a text-safe alphabet of 64 characters. Use URL encoding when you need to include text values in URL parameters, form data, or HTTP headers. Use Base64 when you need to embed binary data like images, files, or encrypted tokens in text-based formats. Base64-encoded strings themselves may need URL encoding if they contain plus signs, slashes, or equals signs that conflict with URL syntax.