URL-Encoding (Percent Encoding) erklärt: Was %20 und %3A wirklich bedeuten

Haben Sie schon %20, %3A oder %2F in einer URL gesehen? Das sind prozent-kodierte Zeichen — der Mechanismus, der URLs erlaubt, Sonderzeichen sicher zu transportieren. Dieser Guide erklärt genau, wie URL-Encoding funktioniert.

Testen Sie unser URL Encoder/Decoder Tool zum sofortigen Kodieren und Dekodieren →

Was ist URL-Encoding (Percent Encoding)?

URL-Encoding, formal Percent Encoding genannt, ist ein in RFC 3986 definierter Mechanismus zur Darstellung von Zeichen in einer URI, die nicht erlaubt sind oder eine besondere Bedeutung haben.

URLs können nur eine begrenzte Menge von ASCII-Zeichen enthalten. Zeichen werden in reservierte (mit struktureller Bedeutung wie /, ?, &) und nicht-reservierte Zeichen unterteilt.

Ein Leerzeichen (ASCII 32, hex 0x20) wird zu %20. Ein Doppelpunkt (ASCII 58, hex 0x3A) wird zu %3A.

// URL encoding in action
Original:  https://example.com/search?q=hello world&lang=en
Encoded:   https://example.com/search?q=hello%20world&lang=en

// Reserved characters and their encoded forms:
//   space → %20    : → %3A    / → %2F
//   ? → %3F        & → %26    = → %3D
//   # → %23        + → %2B    @ → %40

URL-Encoding Zeichenreferenz

Hier ist eine Schnellreferenz der am häufigsten kodierten Zeichen.

Wie URL-Encoding funktioniert (Schritt für Schritt)

Der Prozess folgt drei Schritten: (1) Zeichen nehmen, (2) in UTF-8-Bytefolge konvertieren, (3) jedes Byte als %XX kodieren.

Hier sind mehrere Beispiele:

// Step-by-step: How characters become percent-encoded

// Example 1: ASCII character (space)
// Character: " " (space)
// ASCII code: 32 → hex: 0x20
// Encoded:    %20

// Example 2: ASCII character (ampersand)
// Character: "&"
// ASCII code: 38 → hex: 0x26
// Encoded:    %26

// Example 3: Multi-byte UTF-8 (accented letter)
// Character: "é"
// Unicode: U+00E9
// UTF-8 bytes: 0xC3 0xA9 (2 bytes)
// Encoded:     %C3%A9

// Example 4: Multi-byte UTF-8 (Chinese character)
// Character: "中"
// Unicode: U+4E2D
// UTF-8 bytes: 0xE4 0xB8 0xAD (3 bytes)
// Encoded:     %E4%B8%AD

// Example 5: Multi-byte UTF-8 (emoji)
// Character: "🚀"
// Unicode: U+1F680
// UTF-8 bytes: 0xF0 0x9F 0x9A 0x80 (4 bytes)
// Encoded:     %F0%9F%9A%80

Moderne Programmiersprachen erledigen dies automatisch. Nutzen Sie die eingebauten Funktionen oder unser Online-Tool.

Kodieren & dekodieren Sie mit unserem URL Encoder Tool →

encodeURI vs encodeURIComponent in JavaScript

JavaScript bietet zwei URL-Encoding-Funktionen. Die falsche zu wählen ist eine häufige Fehlerquelle.

encodeURI() kodiert eine komplette URI und bewahrt strukturelle Zeichen.

// encodeURI() — preserves URL structure
const url = 'https://example.com/path name?q=hello world';
encodeURI(url);
// → "https://example.com/path%20name?q=hello%20world"
// ✓ :// / ? = are NOT encoded (structure preserved)

encodeURIComponent() kodiert eine URI-Komponente und kodiert auch strukturelle Zeichen wie & = + /.

// encodeURIComponent() — encodes everything for use as a value
const value = 'price=100&discount=20%';
encodeURIComponent(value);
// → "price%3D100%26discount%3D20%25"
// ✓ = & % ARE encoded (they're data, not structure)

// Correct pattern: build URL piece by piece
const base = 'https://api.example.com/search';
const query = 'Tom & Jerry: The Movie';
const fullUrl = base + '?q=' + encodeURIComponent(query);
// → "https://api.example.com/search?q=Tom%20%26%20Jerry%3A%20The%20Movie"

Faustregel: Verwenden Sie immer encodeURIComponent() für Query-Parameter-Werte.

// Comparison table — which characters get encoded?
//
// Character  encodeURI()  encodeURIComponent()
// ─────────  ───────────  ────────────────────
// space      %20          %20
// /          /  (kept)    %2F (encoded)
// ?          ?  (kept)    %3F (encoded)
// &          &  (kept)    %26 (encoded)
// =          =  (kept)    %3D (encoded)
// #          #  (kept)    %23 (encoded)
// :          :  (kept)    %3A (encoded)
// +          +  (kept)    %2B (encoded)
// @          @  (kept)    %40 (encoded)
// é          %C3%A9       %C3%A9
// 中         %E4%B8%AD    %E4%B8%AD

URL-Encoding in verschiedenen Sprachen

Jede große Sprache hat eingebaute URL-Encoding-Funktionen:

JavaScript

// JavaScript — encodeURIComponent / URLSearchParams
// Encode a query parameter value
encodeURIComponent('hello world&key=val');
// → "hello%20world%26key%3Dval"

// Decode
decodeURIComponent('hello%20world%26key%3Dval');
// → "hello world&key=val"

// URLSearchParams (auto-encodes, uses + for spaces)
const params = new URLSearchParams({ q: 'Tom & Jerry', page: '1' });
params.toString(); // → "q=Tom+%26+Jerry&page=1"

Python

# Python 3 — urllib.parse
from urllib.parse import quote, quote_plus, unquote, urlencode

# Path encoding (spaces → %20)
quote('hello world/file')        # → "hello%20world/file"
quote('hello world/file', safe='')  # → "hello%20world%2Ffile"

# Query value encoding (spaces → +)
quote_plus('hello world&key=val')  # → "hello+world%26key%3Dval"

# Build query string from dict
urlencode({'q': 'Tom & Jerry', 'page': '1'})
# → "q=Tom+%26+Jerry&page=1"

# Decode
unquote('%E4%B8%AD%E6%96%87')  # → "中文"

Java

// Java — URLEncoder (spaces → +)
import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

String encoded = URLEncoder.encode(
    "hello world&key=val", StandardCharsets.UTF_8
);
// → "hello+world%26key%3Dval"

String decoded = URLDecoder.decode(encoded, StandardCharsets.UTF_8);
// → "hello world&key=val"

Go

// Go — net/url package
package main
import "net/url"

// Query value encoding (spaces → +)
url.QueryEscape("hello world&key=val")
// → "hello+world%26key%3Dval"

// Path segment encoding (spaces → %20)
url.PathEscape("hello world/file")
// → "hello%20world%2Ffile"

// Build URL safely with url.Values
vals := url.Values{}
vals.Set("q", "Tom & Jerry")
vals.Encode() // → "q=Tom+%26+Jerry"

PHP

<?php
// PHP — urlencode (spaces → +) / rawurlencode (spaces → %20)
urlencode('hello world&key=val');
// → "hello+world%26key%3Dval"

rawurlencode('hello world&key=val');
// → "hello%20world%26key%3Dval"

http_build_query(['q' => 'Tom & Jerry', 'page' => 1]);
// → "q=Tom+%26+Jerry&page=1"

urldecode('hello%20world');  // → "hello world"
?>

Ruby

# Ruby — CGI / URI
require 'cgi'
require 'uri'

CGI.escape('hello world&key=val')
# → "hello+world%26key%3Dval"

URI.encode_www_form('q' => 'Tom & Jerry', 'page' => '1')
# → "q=Tom+%26+Jerry&page=1"

CGI.unescape('hello%20world')  # → "hello world"

Häufige URL-Encoding-Fehler

1. Doppelte Kodierung

Doppelte Kodierung entsteht, wenn ein bereits kodierter String erneut kodiert wird. %20 wird zu %2520.

// Double encoding — a very common bug
const value = 'hello world';
const encoded = encodeURIComponent(value);  // "hello%20world"

// BUG: encoding again
encodeURIComponent(encoded);
// → "hello%2520world"  (%20 → %25 + 20)
// Server decodes to "%20" (literal) instead of " " (space)

// FIX: encode raw values exactly once

2. Die gesamte URL kodieren

Eine komplette URL an encodeURIComponent() zu übergeben zerstört die URL-Struktur.

// WRONG: encoding entire URL
encodeURIComponent('https://example.com/api?q=test');
// → "https%3A%2F%2Fexample.com%2Fapi%3Fq%3Dtest"  (broken!)

// CORRECT: encode only the parameter value
'https://example.com/api?q=' + encodeURIComponent('test value');
// → "https://example.com/api?q=test%20value"

3. Leerzeichen: + vs %20

HTML-Formulare verwenden +, RFC 3986 verwendet %20. Für APIs bevorzugen Sie %20.

// Space encoding: + vs %20
// HTML form submission (application/x-www-form-urlencoded):
//   "hello world" → "hello+world"

// RFC 3986 (URI standard):
//   "hello world" → "hello%20world"

// JavaScript functions:
encodeURIComponent('hello world');  // → "hello%20world" (RFC 3986)
new URLSearchParams({q: 'hello world'}).toString(); // → "q=hello+world" (form)

4. Query-Parameter nicht kodieren

Benutzereingaben in Query-Strings nicht zu kodieren ist ein Sicherheitsrisiko.

// Missing encoding breaks URLs
const search = 'Tom & Jerry';

// WRONG: unencoded & splits the value
'/search?q=' + search;
// → "/search?q=Tom & Jerry"
// Server sees: q="Tom " and Jerry="" (two params!)

// CORRECT: encode the value
'/search?q=' + encodeURIComponent(search);
// → "/search?q=Tom%20%26%20Jerry"
// Server sees: q="Tom & Jerry" (one param)

Best Practices für URL-Encoding

Kodieren Sie immer Benutzereingaben bevor Sie sie in Query-Strings oder Pfadsegmente einfügen.

Nutzen Sie Bibliotheksfunktionen statt manueller Ersetzung.

Testen Sie mit Sonderzeichen: & = ? / # + % und Nicht-ASCII-Zeichen.

Verwenden Sie URL-sicheres Base64 für Binärdaten in URLs.

// Best practice: use URL / URLSearchParams API
const url = new URL('https://api.example.com/search');
url.searchParams.set('q', 'Tom & Jerry: The Movie');
url.searchParams.set('lang', 'en');
url.toString();
// → "https://api.example.com/search?q=Tom+%26+Jerry%3A+The+Movie&lang=en"
// All encoding handled automatically!

// URL-safe Base64 (avoids + and / in URLs)
// Standard:  "SGVsbG8gV29ybGQ=" (may contain + / =)
// URL-safe:  "SGVsbG8gV29ybGQ"  (uses - _ instead)

Base64 Encoder →URL Parser →

Häufig gestellte Fragen

Warum wird das Leerzeichen als %20 kodiert?

Das Leerzeichen hat den ASCII-Code 32, also 0x20 hexadezimal. Percent Encoding stellt ein Byte als % gefolgt vom Hex-Wert dar.

Was ist der Unterschied zwischen + und %20?

%20 stammt aus RFC 3986. + stammt aus dem Formular-Format. %20 ist universeller.

Muss ich die gesamte URL kodieren?

Nein. Kodieren Sie nur einzelne Komponenten. Strukturelle Zeichen müssen unkodiert bleiben.

Unterschied zwischen encodeURI und encodeURIComponent?

encodeURI() bewahrt strukturelle Zeichen. encodeURIComponent() kodiert sie. Für Parameter-Werte immer encodeURIComponent() verwenden.

Wie dekodiere ich einen URL-kodierten String?

JavaScript: decodeURIComponent(). Python: urllib.parse.unquote(). PHP: urldecode().

URL-Encoding ist ein fundamentales Web-Konzept. Speichern Sie diesen Guide als Lesezeichen.

Testen Sie unseren URL Encoder/Decoder →