How to Encode and Decode URLs When Special Characters Cause Problems

URL encoding replaces characters that have special meanings in a web address—or characters that are not safe to transmit—with a percent sign followed by a hexadecimal code. Decoding reverses that process so the original text can be read again.

For example, a space becomes %20, and & becomes %26. Encoding is essential when a URL includes search terms, form data, file names, or text containing spaces, symbols, or non-English characters.

Why URLs Need Encoding

URLs can only reliably contain a limited set of characters. Some characters have technical meanings:

Character Meaning in a URL Encoded form
Space Separates parts of a query or breaks a URL %20 or + in form data
& Separates query parameters %26
= Separates a parameter name from its value %3D
? Begins the query string %3F
# Marks a fragment or section %23
/ Separates path sections %2F
: Separates protocol, host, or path parts %3A
% Begins an encoded character %25

If you paste unencoded text into a URL, a browser or server may interpret those characters incorrectly.

For example, this search query:

https://example.com/search?q=cats & dogs

is ambiguous because & normally separates URL parameters. Encoded correctly, it becomes:

https://example.com/search?q=cats%20%26%20dogs

Encode a URL With an Online Tool

Online URL encoders are the quickest option for one-off links.

  1. Copy the text or URL that contains special characters.
  2. Open an online URL encoder.
  3. Paste the text into the input field.
  4. Choose Encode.
  5. Copy the encoded result.
  6. Paste it into your link, email, form, or application.

If you need to reverse it, paste the encoded URL into the same tool and choose Decode.

Be careful with sensitive information. Do not paste passwords, private API keys, personal data, or confidential query strings into an online tool unless you trust its privacy policy.

Encode URLs in a Browser

Most browsers encode many characters automatically when you type or paste a URL into the address bar. However, this does not mean every part of a URL is encoded correctly for an API, form, or application.

For example, if you paste:

https://example.com/search?q=hello world

the browser may display it with %20 in place of the space. But when building links programmatically or passing values in a query string, encode the values explicitly to avoid unexpected behavior.

Encode URLs in JavaScript

JavaScript provides two main functions.

Use encodeURIComponent for values

Use this when encoding a single value, such as a search term or form field:

const query = "cats & dogs";
const encoded = encodeURIComponent(query);

console.log(encoded);

Output:

cats%20%26%20dogs

Then build the URL:

const url = `https://example.com/search?q=${encoded}`;

Use encodeURI for a complete URL

Use this when encoding an entire URL while preserving characters such as :, /, ?, and &:

const url = "https://example.com/search?q=cats & dogs";
const encoded = encodeURI(url);

console.log(encoded);

Output:

https://example.com/search?q=cats%20&%20dogs

In most cases, use encodeURIComponent for individual query parameter values. Use encodeURI only when you need to encode a complete URL and want to preserve URL structure.

Decode URLs in JavaScript

Use decodeURIComponent to decode a single encoded value:

const encoded = "cats%20%26%20dogs";
const decoded = decodeURIComponent(encoded);

console.log(decoded);

Output:

cats & dogs

Use decodeURI for a full URL:

const encodedUrl = "https://example.com/search?q=cats%20&%20dogs";
const decodedUrl = decodeURI(encodedUrl);

console.log(decodedUrl);

Be cautious when decoding untrusted input. Decoding does not make a URL safe; it only converts encoded characters back to their original form.

Encode URLs in Python

Python’s urllib.parse module handles URL encoding.

Encode a query value

from urllib.parse import quote

query = "cats & dogs"
encoded = quote(query)

print(encoded)

Output:

cats%20%26%20dogs

Encode a complete URL

from urllib.parse import quote

url = "https://example.com/search?q=cats & dogs"
encoded = quote(url, safe=":/?&=")

print(encoded)

Decode a URL

from urllib.parse import unquote

encoded = "cats%20%26%20dogs"
decoded = unquote(encoded)

print(decoded)

Output:

cats & dogs

Encode URLs in Excel or Google Sheets

Spreadsheets can encode text using a built-in function.

In Google Sheets, use:

=ENCODEURL(A2)

If cell A2 contains cats & dogs, the formula returns:

cats%20%26%20dogs

Excel also supports ENCODEURL in newer versions. Availability can depend on your Excel version and platform.

Understand Encoding vs. Escaping

URL encoding is not the same as HTML escaping.

Purpose Example Use
URL encoding & becomes %26 Putting text into a URL
HTML escaping & becomes & Displaying text safely on a web page

If you encode a URL for use in HTML, you may need both processes. First URL-encode the parameter value, then escape the final URL if it will appear in HTML.

Common URL Encoding Problems

Spaces in URLs

A space should usually become %20 in a URL path or query value. In form-encoded data, a space may appear as +.

hello world

can become:

hello%20world

or, in form data:

hello+world

Ampersands breaking query strings

If a value contains &, encode it as %26. Otherwise, the server may treat it as the start of a new parameter.

For example:

?name=Tom & Jerry

should become:

?name=Tom%20%26%20Jerry

Double encoding

Do not encode a value twice. %20 can become %2520, which may then be decoded incorrectly.

If a URL already contains %20, do not encode it again unless you specifically need to encode the percent sign itself.

Encoding an entire URL when you only need a value

Encoding a full URL with encodeURIComponent can encode characters such as : and /, producing a URL that no longer works as expected. Encode individual parameter values instead.

Quick Reference

Character Encoded form
Space %20
& %26
= %3D
? %3F
# %23
/ %2F
: %3A
% %25

Encode special characters before placing them in a URL, especially spaces, ampersands, and symbols with technical meanings. Use encodeURIComponent for individual values, avoid double encoding, and decode only when you need to read the original text.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles