Кодируем поисковый запрос
Исходник
hello world & more
Закодировано
hello%20world%20%26%20more
Пробелы превращаются в %20, а & — в %26, чтобы его не приняли за разделитель query-параметров.
Кодировщик / декодировщик URL
Безопасно кодируйте и декодируйте компоненты URL.
Последнее обновление
ДекодированоВставьте текст, чтобы начать
Закодировано
Процент-кодированный или декодированный результат появится здесь — с поддержкой Unicode.
Что такое URL-кодировщик?
URL-кодировщик (он же percent-encoder или URI-encoder) заменяет зарезервированные и небезопасные символы на % и две шестнадцатеричные цифры. Разработчики тянутся к нему, когда собирают query-строки, экранируют сегменты пути, делятся ссылками с пробелами или не-ASCII символами и разбираются с редиректами.
В URL допустим довольно узкий набор ASCII-символов. Всё остальное — пробелы, диакритика, эмодзи, кириллица, а также зарезервированные символы вроде ?, #, &, =, когда они выступают в роли данных, — нужно процентно кодировать, иначе по дороге от браузера до сервера ссылка попросту сломается.
В JavaScript есть две функции кодирования: encodeURI (бережёт структуру URL: /, ?, #, &) и encodeURIComponent (кодирует всё зарезервированное). encodeURIComponent нужен для *значений*, которые вы подставляете в query-строку, а encodeURI — для *целого URL*, который должен остаться рабочим.
Что вы освоите по ходу кодирования URL
- Процентное кодирование заменяет один байт на
%и две hex-цифры — например, пробел превращается в%20. - Зарезервированные символы (
:/?#&=+) несут структурный смысл в URL. Их нужно кодировать, когда они являются данными, а не разделителями. - Не-ASCII текст (диакритика, эмодзи, кириллица, CJK) сначала переводится в байты UTF-8, и затем каждый байт кодируется отдельно.
Как кодировать и декодировать URL по шагам
Выберите направление
Encode — если у вас обычный текст и нужно сделать его безопасным для URL. Decode — если у вас уже есть строка с
%-кодами и нужно вернуть исходный текст.Выберите режим кодирования
encodeURIComponent(кодирует всё зарезервированное) — для значений в query-строке;encodeURI(сохраняет структуру) — для целых URL.Вставьте входные данные
Вставьте исходный текст или закодированный URL. Поддерживается многострочный ввод — удобно для пакетного декодирования.
Скопируйте результат
Скопируйте закодированное или декодированное значение. Преобразование выполняется локально в браузере, так что секреты в URL остаются у вас на машине.
Шпаргалка по самым частым URL-кодам
Символы, которые вы будете кодировать чаще всего, и их процентная форма. Семантика зарезервированных символов описана в RFC 3986.
| Символ | Кодируется как | Зачем |
|---|---|---|
| пробел | %20 | Пробелы недопустимы в URL |
! | %21 | Зарезервирован у части серверов |
# | %23 | Открывает фрагмент (якорь) |
$ | %24 | Зарезервированный символ |
& | %26 | Разделяет параметры query-строки |
+ | %2B | В form-encoded теле означает пробел |
/ | %2F | Разделитель сегментов пути |
: | %3A | Разделяет схему и хост |
= | %3D | Разделяет ключ и значение в query-строке |
? | %3F | Открывает query-строку |
@ | %40 | Разделяет userinfo и хост |
| байт UTF-8 | %C3%A9 | Каждый не-ASCII байт кодируется отдельно |
Примеры кодирования URL для практики
Кодируем не-ASCII символы
Исходник
café
Закодировано
caf%C3%A9
é в UTF-8 — это последовательность байтов 0xC3 0xA9, поэтому в кодированной форме на один символ приходится *две* группы %XX.
encodeURI против encodeURIComponent
Исходник
https://example.com/path?q=hello world
encodeURI
https://example.com/path?q=hello%20world
encodeURIComponent
https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world
encodeURI бережёт структуру URL (слэши, ?, =). encodeURIComponent кодирует всё зарезервированное — применяйте его к значениям внутри query-строки и никогда к URL целиком.
Типичные ошибки при кодировании URL
- Использовать
encodeURIдля значений query-строки —&и=останутся как есть и сломают разбор параметров. - Кодировать URL дважды. Классический признак двойного кодирования —
%2520там, где должно быть%20. - Забывать, что
+означает пробел в телеapplication/x-www-form-urlencoded, но в пути или query-строке URL это просто литерал+.
FAQ по URL-кодированию
Что такое URL-кодирование?
URL-кодирование (или процентное кодирование) — это способ представить символы, имеющие в URL особый смысл или небезопасные для передачи, заменив их на
% и две шестнадцатеричные цифры.В чём разница между encodeURI и encodeURIComponent?
encodeURI сохраняет структурные символы URL (/, ?, #, &, =, +). encodeURIComponent кодирует их все — это то, что нужно для отдельных *значений*, которые вы вставляете внутрь URL: значений query-параметров, сегментов пути, фрагментов. Подробности в документации MDN: encodeURI и encodeURIComponent.Почему пробел превращается в %20?
Пробелы в URL запрещены, поэтому их заменяют на
%20 — процентное кодирование ASCII-символа пробела (0x20 в шестнадцатеричной системе).Когда нужно делать URL-кодирование?
Любое значение от пользователя или динамические данные перед подстановкой в URL: значения query-строки, сегменты пути, цели редиректов, параметры OAuth. Никогда не считайте, что сырой ввод сам по себе безопасен для URL.
Можно ли отменить URL-кодирование?
Да — это URL-декодирование.
decodeURI, decodeURIComponent или любой URL-декодировщик возвращает процентно-закодированную строку к исходному виду.