Text to URL Encoding Explained
A URL can only contain a limited set of characters: letters (A-Z, a-z), digits (0-9), and a handful of special characters (-._~). Everything else — spaces, ampersands, question marks, non-English characters — must be encoded before it can travel inside a URL without breaking it. That encoding process is called percent-encoding (also called URL encoding), and it is fundamental to how the web handles form submissions, query strings, and API parameters.
What Percent-Encoding Is and Why It Exists
Percent-encoding replaces each unsafe character with a percent sign followed by two hexadecimal digits representing the character's UTF-8 byte value. A space character (UTF-8 byte 0x20) becomes %20. An ampersand (0x26) becomes %26. An equals sign (0x3D) becomes %3D.
URLs have structure: the question mark separates the path from the query string, the ampersand separates query parameters, and the equals sign connects parameter names to their values. If any of those characters appear inside a parameter value, the URL parser cannot distinguish between the structure and the content. Percent-encoding solves this by escaping those characters inside values so the parser sees only "safe" structural characters.
Encode Table: Common Characters and Their Percent-Encoded Values
| Character | Percent-Encoded | Where It Matters |
|---|---|---|
| Space | %20 (or +) | Any URL parameter value |
| & | %26 | Inside query parameter values |
| = | %3D | Inside query parameter values |
| / | %2F | Path segments inside parameter values |
| ? | %3F | Inside query parameter values |
| # | %23 | Inside URLs (hash has special meaning) |
| + | %2B | Inside query values (+ means space in form data) |
| @ | %40 | Email addresses in URLs |
| : | %3A | Inside parameter values |
The Difference Between encodeURI and encodeURIComponent
In JavaScript, there are two built-in encoding functions and they handle different situations:
- encodeURI() encodes a complete URL. It does not encode characters that are valid URL structure characters (/ : @ ? # & = + $). Use it when you have a full URL and want to make it safe without breaking its structure.
- encodeURIComponent() encodes a single value that will be inserted into a URL. It encodes everything except letters, digits, and - _ . ! ~ * ' ( ). Use it on query parameter values and path segments before assembling the URL.
The common mistake is using encodeURI() on a parameter value. If your value contains an ampersand or equals sign, encodeURI() will not encode them, and the URL parser will misinterpret your parameter. Always use encodeURIComponent() on values.
When You Need URL Encoding: Real Examples
Query Strings With User Input
If a user searches for "coffee & tea" and you put that directly in a URL like /search?q=coffee & tea, the ampersand breaks the query string — the parser sees q=coffee, then an extra parameter with no value, then tea. The correct URL is /search?q=coffee%20%26%20tea, where the space is %20 and the ampersand is %26.
Form Data Submission
HTML forms encode their data as application/x-www-form-urlencoded before sending. In this format, spaces become + (not %20), and other characters use percent-encoding. If you are constructing form data manually or debugging a form submission, understanding this encoding is essential.
API Parameters
When calling an API with parameters that contain special characters — dates in ISO format (2026-05-17), email addresses, or text with slashes — URL encoding ensures those values arrive at the server correctly. Unencoded values in API calls are a common source of 400 Bad Request errors.
Decoding URL-Encoded Strings
Decoding is the reverse process — taking a percent-encoded string and converting it back to readable text. This is useful when you receive an encoded URL from a log, an error message, or a network capture and need to read the original parameter values. A URL decoder handles the conversion: %20 becomes a space, %26 becomes an ampersand, %3D becomes an equals sign. Browser developer tools also decode URLs in the network tab, but a dedicated decoder is faster when you only need to inspect a specific string.
Use these tools
Keep exploring the encoding and decoding tools
This post belongs to the encoding cluster. Jump straight into the main tool, then browse related tools and the full hub.
Primary tool
Numbers to Letters Converter
Use this numbers to letters calculator to decode 1-26 into A-Z instantly. This A1Z26 decoder converts sequences like 20 5 24 20 into TEXT for ciphers, puzzles, games, and classroom activities.
Letters to Numbers Converter
Map letters A-Z to numbers 1-26 instantly. This letter to number translator uses the A1Z26 cipher to transform alphabetical characters into their corresponding numeric positions. Convert words to numbers by mapping each letter to its alphabet position (A=1, B=2, C=3, etc.).
Text to Hex
Convert text to hexadecimal values using UTF-8 encoding. This Text to Hex converter transforms plain text into hexadecimal representation using 8-bit ASCII encoding for each character.