Кодирование URL в JavaScript

encodeURIComponent() — это правильный выбор для кодирования URL в JavaScript.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

Но стоит обратить внимание на то, что есть небольшие различия с версией urlencode() из PHP. Как упомянул @CMS, этот метод не кодирует каждый символ. Ребята с сайта phpjs.org создали JavaScript-эквивалент функции urlencode() из PHP:

function urlencode(str) {
  str = (str + '').toString();

  // Тильда ( ~ ) должна быть разрешена без экранирования в будущих версиях PHP (как указано ниже), но если вы хотите,
  // чтобы поведение соответствовало текущему PHP, вам нужно будет добавить ".replace(/~/g, '%7E');" к следующему коду.
  return encodeURIComponent(str)
    .replace('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

Таким образом, если вам нужно поведение, аналогичное urlencode() в PHP, вы можете использовать приведенную выше функцию.

Чтобы закодировать URL, как уже было упомянуто ранее, у вас есть две функции:

encodeURI()

и

encodeURIComponent()

Причина существования обеих функций в том, что первая сохраняет структуру URL, но рискует оставить слишком много символов без экранирования, в то время как вторая кодирует все, что необходимо.

С помощью первой функции вы могли бы скопировать новый закодированный URL в адресную строку (например), и он бы работал. Однако ваши неэкранированные символы '&' будут мешать разделителям полей, '=' — именам и значениям полей, а '+' будет выглядеть как пробелы. Тем не менее, для простых данных, когда вы хотите сохранить природу URL того, что вы экранируете, это подходит.

Вторая функция выполняет все необходимые действия, чтобы убедиться, что ничего в вашей строке не мешает URL. Она оставляет некоторые несущественные символы без экранирования, чтобы URL оставался максимально читаемым без помех. URL, закодированный таким образом, больше не будет работать как URL без декодирования.

Итак, если у вас есть возможность, всегда стоит использовать encodeURIComponent() — перед тем как добавлять пары имя/значение, закодируйте как имя, так и значение с помощью этой функции, прежде чем добавлять их к строке запроса.

У меня возникают трудности с тем, чтобы придумать причины использовать encodeURI() — я оставлю это для более сообразительных людей.

Что такое кодирование URL:

URL должен быть закодирован, когда в нем содержатся специальные символы. Например:

console.log(encodeURIComponent('?notEncoded=&+'));

В этом примере мы можем заметить, что все символы, кроме строки notEncoded, закодированы с помощью знаков %. Кодирование URL также известно как процентное кодирование, поскольку оно заменяет все специальные символы на % с уникальным кодом после.

Зачем нужно кодирование URL:

Некоторые символы имеют специальное значение в строке URL. Например, символ ? обозначает начало строки запроса. Чтобы успешно найти ресурс в Интернете, необходимо различать, когда символ является частью строки, а когда — частью структуры URL.

Как мы можем достичь кодирования URL в JavaScript:

JavaScript предлагает множество встроенных утилит, которые можно использовать для простого кодирования URL. Вот два удобных варианта:

1. encodeURIComponent(): Принимает компонент URI в качестве аргумента и возвращает закодированную строку URI.
2. encodeURI(): Принимает URI в качестве аргумента и возвращает закодированную строку URI.

Пример и предупреждения:

Обратите внимание, что не следует передавать целый URL (включая схему, например, https://) в encodeURIComponent(). Это может фактически сделать URL неработоспособным. Например:

// для целого URI не используйте encodeURIComponent, это преобразует
// символы / и URL не будет работать корректно
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// вместо этого используйте encodeURI для целых URL
console.log(encodeURI("http://www.random.com/specials&char.html"));

Если мы вставим весь URL в encodeURIComponent, то символы косой черты (/) также будут преобразованы в специальные символы. Это приведет к тому, что URL больше не сможет работать корректно.

Поэтому (как и подразумевает название), используйте:

1. encodeURIComponent для определенной части URL, которую вы хотите закодировать.
2. encodeURI для целого URL, который вы хотите закодировать.

Чтобы избежать двойного кодирования, хорошей практикой является декодирование URL перед его кодированием (например, если вы работаете с URL, введёнными пользователем, которые уже могут быть закодированы).

Рассмотрим пример: у нас есть входное значение abc%20xyz 123 (один пробел уже закодирован):

encodeURI("abc%20xyz 123")            // Неправильно: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // Правильно: "abc%20xyz%20123"

Таким образом, сначала декодируем URL с помощью decodeURI, а затем можем безопасно закодировать его с помощью encodeURI, чтобы избежать проблемы с двойным кодированием.