Qual é a diferença entre decodeURIComponent e decodeURI?

363

Qual é a diferença entre as funções JavaScript decodeURIComponente decodeURI?

javascript Jon Tackabury
fonte

Respostas:

398

Para explicar a diferença entre esses dois, deixe-me explicar a diferença entre encodeURIe encodeURIComponent.

A principal diferença é que:

  • A encodeURIfunção deve ser usada no URI completo.
  • A encodeURIComponentfunção deve ser usada em .. bem .. componentes URI que são qualquer parte que se encontra entre separadores (; /?: @ & = + $, #).

Portanto, encodeURIComponentesses separadores também são codificados porque são considerados como texto e não como caracteres especiais.

Agora, voltando à diferença entre as funções de decodificação, cada função decodifica seqüências de caracteres geradas por sua contraparte de codificação correspondente, cuidando da semântica dos caracteres especiais e seu tratamento.

MahdeTo
fonte
4
Outra diferença vital é que o unescape não lida com seqüências UTF-8 de vários bytes, enquanto o decodeURI [Component] faz:decodeURIComponent("%C3%A9") == "é"; unescape("%C3%A9") == "é";
chris
IMHO, dar alguns exemplos seria muito útil #
92219 transang
114

encodeURIComponent / decodeURIComponent () é quase sempre o par que você deseja usar, para concatenar e dividir seqüências de texto em partes de URI.

encodeURI em menos comum e com um nome enganador: deve realmente ser chamado fixBrokenURI. Ele pega algo que é quase um URI, mas possui caracteres inválidos, como espaços, e o transforma em um URI real. Ele tem um uso válido na correção de URIs inválidos da entrada do usuário e também pode ser usado para transformar um IRI (URI com caracteres Unicode nus) em um URI simples (usando UTF-8 com% de escape para codificar o não ASCII )

decodeURI decodifica os mesmos caracteres que decodeURIComponent, com exceção de alguns caracteres especiais. Ele é fornecido para ser um inverso do encodeURI, mas você ainda não pode contar com ele para retornar o mesmo que originalmente colocou - veja, por exemplo. decodeURI(encodeURI('%20 '));.

Onde encodeURI deveria realmente ser chamado fixBrokenURI (), decodeURI () poderia igualmente ser chamado potencialmenteBreakMyPreviouslyWorkingURI (). Não consigo pensar em nenhum uso válido para isso em nenhum lugar; evitar.

bobince
fonte
11
decodeURI (encodeURI ('% 20')) fornece '% 20' corretamente em, por exemplo, chrome e firefox, apenas imaginando em qual navegador / versão o resultado incorreto que você observou?
Ccppjava 6/12/12
11
Pode ter sido quebrado em 2009, mas o navegador moderno foi pego nesse meio tempo (meu palpite).
WoodrowShigeru
68 
js> s = "http://www.example.com/string with + and ? and & and spaces";
http://www.example.com/string with + and ? and & and spaces
js> encodeURI(s)
http://www.example.com/string%20with%20+%20and%20?%20and%20&%20and%20spaces
js> encodeURIComponent(s)
http%3A%2F%2Fwww.example.com%2Fstring%20with%20%2B%20and%20%3F%20and%20%26%20and%20spaces

Parece que encodeURIproduz um URI "seguro" codificando espaços e outros caracteres (por exemplo, não imprimíveis), enquanto encodeURIComponentcodifica adicionalmente os dois pontos e os caracteres de barra e mais, e deve ser usado em cadeias de caracteres de consulta. A codificação de + e? e & é de particular importância aqui, pois esses são caracteres especiais nas cadeias de consulta.

Jason S
fonte
30

Como eu tinha a mesma pergunta, mas não encontrei a resposta aqui, fiz alguns testes para descobrir qual é realmente a diferença. Fiz isso, pois preciso da codificação para algo que não esteja relacionado a URL / URI.

  • encodeURIComponent("A") retorna "A", não codifica "A" para "% 41"
  • decodeURIComponent("%41") retorna "A".
  • encodeURI("A") retorna "A", não codifica "A" para "% 41"
  • decodeURI("%41") retorna "A".

-Isso significa que ambos podem decodificar caracteres alfanuméricos, mesmo que não os tenham codificado. Contudo...

  • encodeURIComponent("&") retorna "% 26".
  • decodeURIComponent("%26") retorna "&".
  • encodeURI("&") retorna "&".
  • decodeURI("%26") retorna "% 26".

Mesmo que encodeURIComponent não codifique todos os caracteres, decodeURIComponent pode decodificar qualquer valor entre% 00 e% 7F.

Nota: Parece que se você tentar decodificar um valor acima de% 7F (a menos que seja um valor unicode), seu script falhará com um "erro de URI".

Kul-Tigin
fonte
Nota: Há um erro de digitação no primeiro decodeURIComponent (m em vez de n). Não consigo corrigi-lo, porque tenho que editar pelo menos 6 caracteres.
SuperNova
23

encodeURIComponent()

Converte a entrada em uma sequência de caracteres codificada em URL

encodeURI()

O URL codifica a entrada, mas assume que um URL completo é fornecido, portanto, retorna um URL válido, não codificando o protocolo (por exemplo, http: // ) e o nome do host (por exemplo, www.stackoverflow.com ).

decodeURIComponent()e decodeURI()são o oposto do acima

Russ Cam
fonte
12

decodeURIComponent decodificará marcadores especiais de URI, como &,?, #, etc, decodeURI não.

Bjorn
fonte