URL кодировщик и декодер с парсером URL

Что такое URL-кодирование (percent encoding)?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Ключевые возможности

Примеры

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

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

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

Как использовать

1. 1

   Введите URL или закодированную строку

   Вставьте URL в область декодированного для кодирования или percent-кодированную строку в область кодированного для декодирования. Выберите режим encodeURI или encodeURIComponent.

2. 2

   Смотрите результат и разобранную структуру

   Другая область обновляется мгновенно. Парсер URL разбивает URL на протокол, хост, порт, путь, параметры запроса и fragment — все редактируемые.

3. 3

   Скопируйте или перестройте

   Нажмите «Скопировать» для результата. Редактируйте отдельные компоненты URL и нажмите «Перестроить», чтобы собрать новый URL из изменённых частей.

Типичные ошибки

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Типичные сценарии

Отладка искажённых URL

Декодирование percent-кодированных URL из логов сервера, сообщений об ошибках или DevTools для чтения исходного человекочитаемого текста.

Разработка API

Кодирование значений параметров запроса для REST API, чтобы спецсимволы вроде &, = и пробелы не ломали URL запроса.

Настройка OAuth-флоу

Корректное кодирование redirect_uri и других URL-параметров в OAuth authorization URL для предотвращения сбоев аутентификации.

Интернационализированные URL

Кодирование и декодирование URL с китайскими, японскими, корейскими, арабскими и другими не-ASCII символами для интернационализированных приложений.

Анализ маркетинговых ссылок

Декодирование tracking-URL из email-кампаний и рекламных платформ для понимания встроенных UTM-параметров и цепочек редиректов.

Проверка структуры URL

Разбор сложных URL на компоненты — протокол, хост, порт, путь, параметры запроса и fragment — для анализа и модификации.

Технические детали

RFC 3986 — зарезервированные и незарезервированные символы

RFC 3986 определяет незарезервированные символы (A-Z, a-z, 0-9, -, ., _, ~), не нуждающиеся в кодировании, и зарезервированные (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =), служащие разделителями URI и требующие percent-кодирования при использовании как данных.

Поток UTF-8 byte-кодирования

Не-ASCII символы сначала конвертируются в Unicode код-поинт, затем в UTF-8 байты (1-4 байта в зависимости от диапазона), наконец каждый байт percent-кодируется как %XX. Например: é (U+00E9) → UTF-8 байты C3 A9 → %C3%A9. Эмодзи 🎉 (U+1F389) → UTF-8 байты F0 9F 8E 89 → %F0%9F%8E%89.

URL и URI

URI (Uniform Resource Identifier) — общий термин для любой идентифицирующей строки. URL (Uniform Resource Locator) — это URI, также указывающий механизм доступа (вроде https://). Правила кодирования RFC 3986 применимы ко всем URI. JavaScript API использует терминологию URI (encodeURI, decodeURI), повседневное использование — URL.

Лучшие практики

Правильный режим под задачу

Используйте encodeURIComponent() для отдельных ключей и значений параметров. encodeURI() — только для полного URL, когда нужно закодировать небезопасные символы без поломки структуры. Никогда не применяйте encodeURI() к значениям параметров, которые могут содержать &, = или другие зарезервированные.

Избегайте двойного кодирования

Перед кодированием проверяйте, не закодирована ли строка уже. Ищите существующие %-последовательности. Кодирование уже закодированной строки превращает %20 в %2520, %3D в %253D и т. д. Если не уверены — сначала декодируйте, потом кодируйте один раз.

Декодируйте на сервере

Большинство веб-фреймворков автоматически декодируют URL-параметры до того, как они попадают в код приложения. Избегайте ручного декодирования параметров, которые фреймворк уже декодировал — это может вызвать проблемы, если оригинал содержал литеральные percent-последовательности.

Кодируйте значения для OAuth и подписей API

OAuth 1.0 signature base strings и многие алгоритмы подписи API требуют строгого percent-кодирования по RFC 3986. Используйте encodeURIComponent() и затем замените оставшиеся символы, которые он не кодирует (!, ', (, ), *), на их percent-эквиваленты, если этого требует спецификация.

Часто задаваемые вопросы