Skip to content

URL Encoder

Updated: 13 comments

Encode text or a URL with JavaScript-style percent encoding. Enter a value in Text or URL to get an encoded string you can copy.

String to URL Encoding Tool

Input Fields
If enabled, the result will update automatically when you change any value.

URL Encoder Formula

Formula
\[ E = \operatorname{encodeURIComponent}(\operatorname{trim}(S)) \]

Where:

  • \(S\) — the value entered in Text or URL.
  • \(E\) — the encoded output shown under Encoded URL.

The calculator removes leading and trailing whitespace, then applies JavaScript’s encodeURIComponent function. Characters that need encoding are represented by a percent sign followed by hexadecimal digits for each UTF-8 byte.

URL Encoder – Calculation Example

Example: Enter the default value, https://calcdash.com/tools?utm_source=chat, in Text or URL.

\[ \operatorname{encodeURIComponent}(S) = \texttt{https\%3A\%2F\%2Fcalcdash.com\%2Ftools\%3Futm\_source\%3Dchat} \]

Result: https%3A%2F%2Fcalcdash.com%2Ftools%3Futm_source%3Dchat.

How to use the URL Encoder

  1. Enter or paste the value you want to encode into Text or URL. This can be a word, a query-parameter value, a path segment, or a complete URL.
  2. Read the result under Encoded URL. The calculator encodes the entire entered value after removing whitespace at its beginning and end.
  3. Copy the result and place it where an encoded value is needed. If you entered a complete URL, do not assume the result is a link you can open directly; its structural characters have been encoded too.

What URL encoding does

Percent encoding represents certain characters with a percent sign and hexadecimal digits. It lets data include characters that would otherwise have a special meaning in a URL. For example, a space becomes %20, an ampersand becomes %26, and a literal percent sign becomes %25. Each encoded byte has its own percent sequence, so a character outside the ASCII range may produce several sequences.

This calculator uses encodeURIComponent, which is intended for an individual component of a URL. It encodes separators such as :, /, ?, &, and =. That makes it useful when a value must not be mistaken for part of the URL’s structure. For instance, encoding the query value red shoes & boots gives red%20shoes%20%26%20boots. The ampersand remains part of the value rather than separating two parameters.

The default example shows why the distinction matters: encoding a complete URL changes https:// into https%3A%2F%2F. The output is an encoded string representing that URL, not the same navigable URL. If you are assembling a link, keep its structural separators intact and encode only the values that need it. To turn encoded text back into readable text, use the URL Decoder.

Assumptions and practical tips

  • Outer whitespace is removed. The calculator trims spaces and other surrounding whitespace before encoding. Whitespace inside the value remains; ordinary internal spaces become %20. If leading or trailing spaces are significant data, this tool will not preserve them.
  • Some characters remain unchanged. Letters, digits, and - _ . ! ~ * ' ( ) are not encoded by encodeURIComponent. An unchanged character does not mean the calculator skipped the input.
  • Encode a value only once. An existing sequence such as %20 contains a literal percent sign. Encoding it again produces %2520. Decode first if you need to replace an already encoded value.
  • Spaces are not plus signs here. This tool outputs %20 for a space and %2B for a literal plus sign. Some HTML form submissions use + for spaces instead; this calculator does not apply that form-encoding convention.
  • Encoding is not encryption. Anyone can decode the result, so do not use it to hide passwords or other sensitive information. A rare malformed text value containing an unpaired UTF-16 surrogate can also cause JavaScript encoding to fail.

If you first need to collect links from a larger passage, use the URL Extractor. If your task calls for Base64 rather than percent encoding, use the Base64 Encoder; the two formats serve different purposes and produce different results.

Frequently Asked Questions

How can I URL-encode text by hand?

Convert each character that needs encoding to its UTF-8 bytes, then write each byte as a percent sign followed by two hexadecimal digits. For example, an ordinary space is byte 20 in hexadecimal, so it becomes %20. Leave permitted characters unchanged. For longer strings, a tool is safer because one visible character can occupy multiple bytes.

What is the difference between encodeURI and encodeURIComponent?

JavaScript’s encodeURI is intended for a complete URL and leaves structural characters such as :, /, ?, and & unchanged. encodeURIComponent encodes those characters because it treats the input as one value. Use encodeURIComponent for a query-parameter value or path segment; use a URL-building API when you need to assemble a complete link.

How are accented letters and emoji URL-encoded?

They are converted to UTF-8 bytes before percent encoding. For example, é becomes %C3%A9 because its UTF-8 representation has two bytes. An emoji may require four percent sequences. The number of sequences reflects the number of bytes, not the number of characters you see on screen.

How do I encode several query parameters without encoding their separators?

Encode each parameter name and value separately, then join each pair with = and the pairs with &. In JavaScript, URLSearchParams can handle that assembly for you, though it may display spaces as + under form-encoding rules. Do not encode the assembled query string as one component: doing so would also encode its separators.

Are and equivalent in a URL?

Yes. Hexadecimal letters in percent sequences are case-insensitive, so %2F and %2f both represent a slash byte. Encoders commonly produce uppercase letters. Be careful where you place an encoded slash, however: servers and routing systems may interpret it differently after decoding, particularly inside a path segment.

Is URL encoding the same as replacing characters with HTML entities?

No. Percent encoding is used within URLs; HTML entities are used when writing HTML. For example, a literal ampersand in a URL value becomes %26, while an ampersand in HTML source may be written as &. If a URL appears in HTML, both rules may matter at different stages. Do not substitute an HTML entity for a percent-encoded URL value.

Leave a Reply

Your email address will not be published. Required fields are marked *

13 thoughts on “URL Encoder”