URL-кодирование и декодирование

URL может содержать лишь ограниченный набор ASCII-символов. RFC 3986, спецификация синтаксиса URI 2005 года, делит их на две группы. Незарезервированные символы — A–Z, a–z, 0–9 и четыре знака - . _ ~ — кодировать не нужно никогда. У зарезервированных символов есть своя роль: общие разделители : / ? # [ ] @ отделяют схему, хост, путь, запрос и фрагмент, а подразделители ! $ & ' ( ) * + , ; = разделяют элементы внутри них, как & и = в строке запроса. Всё остальное, а также любой зарезервированный символ, используемый как обычные данные, нужно кодировать с помощью процентного кодирования.

Процентное кодирование записывает байт как % и две шестнадцатеричные цифры. Сначала текст преобразуется в UTF-8, поэтому пробел превращается в %20, буква é (два байта) — в %C3%A9, а эмодзи — в четыре группы %XX. Поэтому поисковый запрос «café & bar» попадает в ссылку как caf%C3%A9%20%26%20bar: символ & кодируется, чтобы сервер не принял его за начало нового параметра.

encodeURIComponent подходит для отдельной части: значения параметра запроса, сегмента пути или адреса перенаправления, переданного как параметр. Функция экранирует всё, кроме незарезервированных символов и ! ' ( ) *, которые JavaScript по историческим причинам не трогает. encodeURI (весь URL) исходит из того, что на входе уже полный адрес, и сохраняет зарезервированные символы, поэтому в https://example.com/a b?q=1 кодируется только пробел. Применять encodeURI к значению параметра — классическая ошибка: & или # внутри значения останутся как есть и сломают URL.

Декодировать отменяет любую из этих функций. HTML-формы, отправленные методом GET, используют более старый формат application/x-www-form-urlencoded, где пробел записывается как +, а не %20; для таких данных оставьте галочку Считать + пробелом, а если важен именно знак плюса, например в номере телефона, снимите её. Если во входных данных есть % без двух шестнадцатеричных цифр после него или байты, не являющиеся корректным UTF-8, декодирование завершится понятным сообщением об ошибке, а не будет гадать. Если в тексте есть строка запроса, её параметры в декодированном виде появятся в таблице под инструментом. Для двоичных данных в URL обычно используют Base64url.