Difference between escape(), encodeURI(), encodeURIComponent()

Question

In JavaScript, what is the difference between these?

1. escape() / unescape()
2. encodeuri() / decodeuri()
3. encodeURIComponent() / decodeURIComponent()

Answer 1

For the visually minded, here's a table showing the effects of encodeURI() , encodeURIComponent() and escape() on the commonly-used symbolic ASCII characters:

Char  encUrI  encURIComp  escape
*     *       *           *
.     .       .           .
_     _       _           _
-     -       -           -
~     ~       ~           %7E
'     '       '           %27
!     !       !           %21
(     (       (           %28
)     )       )           %29
/     /       %2F         /
+     +       %2B         +
@     @       %40         @
?     ?       %3F         %3F
=     =       %3D         %3D
:     :       %3A         %3A
#     #       %23         %23
;     ;       %3B         %3B
,     ,       %2C         %2C
$     $       %24         %24
&     &       %26         %26
      %20     %20         %20
%     %25     %25         %25
^     %5E     %5E         %5E
[     %5B     %5B         %5B
]     %5D     %5D         %5D
{     %7B     %7B         %7B
}     %7D     %7D         %7D
<     %3C     %3C         %3C
>     %3E     %3E         %3E
"     %22     %22         %22
\     %5C     %5C         %5C
|     %7C     %7C         %7C
`     %60     %60         %60

Another vital difference is that unescape() does not handle multi-byte UTF-8 sequences whereas decodeURI[Component]() does:

decodeURIComponent("%C3%A9") == "é"
unescape("%C3%A9") == "é"

Answer 2

• escape — broken, deprecated, do not use
• encodeURI — encodes characters that are not allowed (raw) in URLs (use it to fix up broken URIs if you can't fix them beforehand)
• encodeURIComponent — as encodeURI plus characters with special meaning in URIs (use it to encode data for inserting into a URI)

Answer 3

First of all - Escape is deprecated and shouldn't be used.

encodeURI()

You should use this when you want to encode a URL, it encodes symbols that is not allowed in a URL.

encodeURIComponent()

Should be used when you want to encode parameters of your URL, You can also use this to encode a whole URL. But you would have to decode it in order to use it again.

--

I'd say this a duplicate. Here's a good answer on SO - Credits goes to Arne Evertsson: When are you supposed to use escape instead of encodeURI / encodeURIComponent?

There's a lot of details on why/why not on that topic.

Answer 4

• escape - deprecated, you shouldn't use.

• encodeURI - replaces all characters except
  ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # az 0-9

• encodeURIComponent - replaces all characters except
  - _ . ! ~ * ' ( ) az 0-9

Answer 5

Just try encodeURI() and encodeURIComponent() yourself...

 console.log(encodeURIComponent('@#$%^&*'));

Input: @#$%^&* . Output: %40%23%24%25%5E%26* . So, wait, what happened to * ? Why wasn't this converted? TLDR: You actually want fixedEncodeURIComponent() and fixedEncodeURI() . Long-story...

• escape() : Do Not Use!!! To quote MDN escape() Documentation ...

Warning: Although escape() is not strictly deprecated (as in "removed from the Web standards"), it is defined in Annex B of the ECMA-262 standard, whose introduction states:

... Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code....

• encodeURI() : Do Not Use!!! Use fixedEncodeURI() . To quote MDN encodeURI() Documentation ...

If one wishes to follow the more recent RFC3986 for URLs, which makes square brackets reserved (for IPv6) and thus not encoded when forming something which could be part of a URL (such as a host), the following code snippet may help:

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

• encodeURIComponent() : Do Not Use!!! Use fixedEncodeURIComponent() . To quote the MDN encodeURIComponent() Documentation ...

To be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:

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

Then the question can be simplified: What's the difference between fixedEncodeURI() and fixedEncodeURIComponent() ? fixedEncodeURIComponent() encodes the following characters, while fixedEncodeURI() does not: +@?=:#;,$& .