URL-кодировщик и декодер

URL-/процент-кодирование заменяет символы, небезопасные или неоднозначные в URL, на % за которым следует их UTF-8 байтовое значение в hex. Режим Компонент использует encodeURIComponent() и кодирует каждый зарезервированный символ — правильно для значений, которые вы встраиваете в строку запроса или путь. Режим Полный URL использует encodeURI(), который сохраняет URL-структурные символы вроде :/?#&=.

Пример

Ввод:

hello world & café / 日本語

Закодировано как Компонент:

hello%20world%20%26%20caf%C3%A9%20%2F%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Закодировано как Полный URL:

hello%20world%20&%20caf%C3%A9%20/%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Обратите внимание, что Полный URL оставил & и / нетронутыми, потому что они имеют структурное значение в URL.

Частые ошибки и подводные камни

Большинство проблем кодирования возникает из-за выбора неправильного режима или двукратного запуска инструмента на одном вводе. Пункты ниже охватывают случаи, которые мы видим чаще всего.

• Использование encodeURI для значений запроса. encodeURI("a&b=c") дает a&b=c (без изменений), что ломает строку запроса. Используйте режим Компонент (encodeURIComponent) для значений.
• Двойное кодирование. Кодирование hello%20world второй раз производит hello%2520world. Сначала декодируйте или пропустите один слой.
• Забыли про #. # внутри значения запроса рассматривается как начало фрагмента, если не закодирован как %23.
• Путаница с плюсом. + означает пробел в form-encoded bodies, но является буквальным + в пути URL или запросе. Чтобы отправить настоящий знак плюс в значении запроса, закодируйте его как %2B.
• Неправильная процентная последовательность. Буквальный %, который никогда не был закодирован, заставляет decodeURIComponent выбросить URI malformed. Либо закодируйте % как %25, либо удалите одиночные проценты перед декодированием.
• UTF-8 против Latin-1 устаревших серверов. Этот инструмент всегда использует UTF-8. Некоторые очень старые системы ожидают Latin-1 / windows-1252 — там é это %E9, а не %C3%A9. Если видите mojibake, другой конец не UTF-8.

В чем разница между encodeURI и encodeURIComponent?

encodeURIComponent экранирует все, что не является буквой, цифрой или одним из -_.!~*'(), поэтому безопасен для отдельных значений запроса и сегментов пути. encodeURI оставляет URL-зарезервированные символы вроде :/?#&= нетронутыми, поэтому подходит для кодирования целого URL, который уже имеет структуру. Используйте Компонент 95% времени; используйте Полный URL, только когда у вас в основном валидный URL с случайными пробелами или Unicode.

Какие символы действительно нуждаются в кодировании в строке запроса?

Разделители строки запроса & и = должны быть закодированы внутри значения (иначе они выглядят как разделители). Пробел становится %20 или +. Маркер фрагмента # должен быть закодирован. Плюс: /, ?, все не-ASCII и управляющие символы. encodeURIComponent обрабатывает все это; encodeURI оставляет &, =, /, ?, # не закодированными, потому что они URL-структурные.

Почему мой URL получается двойным кодированием?

Двойное кодирование происходит, когда вы кодируете значение, которое уже закодировано. Пробел становится %20, затем сам % становится %25, давая %2520. Обычно вызвано передачей уже закодированного URL через encodeURIComponent снова, или фреймворком, который автоматически кодирует поверх вашего ручного кодирования. Декодируйте один раз и перекодируйте чисто, или пропустите один слой.

Как это обрабатывает не-ASCII символы вроде эмодзи или букв с акцентами?

Кодировщики JavaScript сначала преобразуют не-ASCII символы в UTF-8 байты, затем процент-кодируют каждый байт. Так é становится %C3%A9 (два байта), а эмодзи вроде 😀 становится %F0%9F%98%80 (четыре байта). Декодирование обращает процесс. Это стандартное поведение RFC 3986 и работает с каждым современным сервером.

Почему декодирование завершается с "URI malformed"?

decodeURIComponent выбрасывает, когда видит недопустимую процентную последовательность — одиночный %, за которым не следуют две hex-цифры (например, %ZZ или просто %), или UTF-8 байтовые последовательности, которые недействительны (например, %C3 без допустимого байта продолжения). Обычные причины: буквальный % во вводе, который никогда не был закодирован, или строка, которая уже была однажды декодирована и все еще имеет знаки процента.

Должны ли пробелы становиться + или %20?

Оба встречаются на практике. %20 правилен везде — в путях, строках запроса и фрагментах. Сокращение + означает только "пробел" внутри формата application/x-www-form-urlencoded, используемого при отправке HTML-форм. Этот инструмент использует %20, потому что это делает encodeURIComponent. Если вам конкретно нужен +, замените %20 на + после кодирования.