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

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

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

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

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

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

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

Подробно,encodeURI()не кодирует[email protected]#{{content}}amp;*()=:/,;?+и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 standard (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.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: