Как кодировать URL-адрес с помощью JavaScript

Как вы кодируете URL-адрес в JavaScript?

В зависимости от того, что вам нужно сделать, есть 2 функции JavaScript, которые помогут вам.

Первый – encodeURI() , а второй – encodeURIComponent() .

Примечание: вы можете прочитать о escape() , но это устарело и не должно использоваться.

Эти 2 метода отличаются тем, какие символы они кодируют.

Подробнее, encodeURI() не кодирует ~!@#$&*()=:/,;?+ и encodeURIComponent() не кодирует -_.!~*'() , кодирование всех остальных символов. Почему они отличаются друг от друга? Потому что они предназначены для разных целей:

• encodeURI() предназначен для кодирования полного URL-адреса
• encodeURIComponent() предназначен для кодирования одного значения параметра URL

Если бы вы вызвали encodeURIComponent() по полному URL-адресу, так как он кодирует / , разделители пути URL-адреса также были бы закодированы (среди прочего):

encodeURI("http://flaviocopes.com/ hey!/")
//"http://flaviocopes.com/%20hey!/"
encodeURIComponent("http://www.example.org/a file with spaces.html")
// "http%3A%2F%2Fflaviocopes.com%2F%20hey!%2F"

MDN предлагает улучшение для соответствия стандарту RFC 3986 ( http://tools.ietf.org/html/rfc3986 ), реализуя следующую функцию:

const fixedEncodeURIComponent = (str) => {
  return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
    return '%' + c.charCodeAt(0).toString(16)
  })
}

Вы вызываете его для каждого отдельного параметра, который вы добавляете в URL-адрес.

Методы encodeURI() и encodeURIComponent() имеют соответствующий decodeURI() и decodeURIComponent() который выполняет противоположную работу, которую вы можете использовать на бэкэнде, если используете Node.js .

Оригинал: “https://flaviocopes.com/how-to-encode-url/”