DevToolkit Pro

What Is URL Encoding

URL Encoding (also called Percent-Encoding) converts special characters into % followed by two hexadecimal digits, which is exactly what an online url encoder does for you. For example, a space becomes %20, and the Chinese character "你" becomes %E4%BD%A0.

URL encoding ensures URLs contain only safe ASCII characters, preventing special characters from breaking URL structure.

Why You Need URL Encoding

1. Safe transmission: Special characters in URLs (?, &, =) have reserved meanings and must be encoded
2. Chinese/non-ASCII support: Browser address bars don't directly support non-ASCII characters
3. Form submission: HTML forms using application/x-www-form-urlencoded require encoding
4. API calls: Query parameter values must be encoded to avoid ambiguity

Common URL Encoding Reference

| Character | Encoding | Notes | |-----------|----------|-------| | Space | %20 or + | Most common encoding | | & | %26 | Query parameter separator | | = | %3D | Key-value separator | | ? | %3F | Query string start | | / | %2F | Path separator | | # | %23 | Fragment identifier | | % | %25 | The encoding character itself | | + | %2B | Plus sign (+ represents space in query strings) |

Two Encoding Scenarios

1. URL Path Encoding

Encodes the path portion while preserving / and path structure:

Original: https://example.com/docs/getting-started.html
Encoded:  https://example.com/%E6%96%87%E6%A1%A3/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97.html

2. Query Parameter Encoding

Encodes query parameter values while preserving ?, &, = structure (a url params parser can help you inspect the result):

Original: https://example.com/search?q=hello world&lang=zh-CN
Encoded:  https://example.com/search?q=hello%20world&lang=zh-CN

How to Use an Online URL Encoder/Decoder

Using DevToolkit Pro's URL Encoder:

Encode

1. Enter the original text or URL
2. Choose encoding mode (URL encoding / component encoding)
3. Click Encode
4. Copy the encoded result

Decode

1. Enter the encoded text
2. Click Decode
3. The original text appears in the output area

Encoding Mode Differences

| Mode | Description | Use Case | |------|-------------|----------| | encodeURIComponent | Encodes all special chars including / | Encoding query parameter values | | encodeURI | Preserves /, :, @ and other URL structure | Encoding complete URLs |

Encoding Examples

const url = 'https://example.com/path?q=hello world';

// encodeURIComponent (encodes parameter values)
// Result: https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world

// encodeURI (encodes full URL)
// Result: https://example.com/path?q=hello%20world

URL Encoding in Web Development

HTML Forms

<form action="/search" method="GET">
  <input name="q" value="hello world">
  <!-- Submits as: /search?q=hello+world -->
</form>

JavaScript fetch API

// Auto-encodes query parameters
const params = new URLSearchParams({
  q: 'hello world',
  lang: 'zh-CN'
});
fetch(`/search?${params}`);

Backend Reception

// Node.js Express
app.get('/search', (req, res) => {
  const query = req.query.q; // Auto-decoded to "hello world"
});

FAQ

What's the Difference Between URL Encoding and Base64?

URL encoding preserves URL structure, encoding only special and non-ASCII characters. Base64 is a general binary-to-text encoding that produces URL-unfriendly characters (+, /, =). Use URL encoding for URL contexts.

Why Is a Space Sometimes %20 and Sometimes +?

In URL paths, spaces encode as %20. In query strings using application/x-www-form-urlencoded format, spaces encode as +. The two formats are used in different contexts.

Can an Encoded URL Still Be Accessed?

Yes. Browsers and servers support URL encoding and automatically decode it. An encoded URL is fully valid.

This article is brought to you by DevToolkit Pro. More developer tools at the homepage.