461

What is the difference between the JavaScript functions decodeURIComponent and decodeURI?

hopper
  • 13,060
  • 7
  • 49
  • 53
Jon Tackabury
  • 47,710
  • 52
  • 130
  • 168

8 Answers8

483

To explain the difference between these two let me explain the difference between encodeURI and encodeURIComponent.

The main difference is that:

  • The encodeURI function is intended for use on the full URI.
  • The encodeURIComponent function is intended to be used on .. well .. URI components that is any part that lies between separators (; / ? : @ & = + $ , #).

So, in encodeURIComponent these separators are encoded also because they are regarded as text and not special characters.

Now back to the difference between the decode functions, each function decodes strings generated by its corresponding encode counterpart taking care of the semantics of the special characters and their handling.

John
  • 1
  • 13
  • 98
  • 177
MahdeTo
  • 11,034
  • 2
  • 27
  • 28
  • 9
    Another vital difference is that unescape does not handle multi-byte UTF-8 sequences whereas decodeURI[Component] does: `decodeURIComponent("%C3%A9") == "é"; unescape("%C3%A9") == "é";` – chris Jan 18 '18 at 16:00
  • 4
    IMHO, giving some examples would be very useful – Sang Feb 09 '19 at 09:50
  • Note that `decodeURI("%C3%A9") == "é"`. Unless you have some specific reason to NOT ALLOW encoding `application/x-www-form-urlencoded` the `decodeURI()` will be the best option because browsers usually send data as `application/x-www-form-urlencoded`. The most common difference is handling `+`. – Mikko Rantalainen Jan 18 '21 at 11:20
  • It should be okay to use `encodeURIComponent()` for everything but always decode with `decodeURI()`. For the output of `encodeURIComponent()` it doesn't matter if you use `decodeURI()` or `decodeURIComponent()`. If you need to handle browser emitted query string, parsing that correctly may need use of `decodeURI()` instead of `decodeURIComponent()` – Mikko Rantalainen Jan 18 '21 at 11:24
133

encodeURIComponent/decodeURIComponent() is almost always the pair you want to use, for concatenating together and splitting apart text strings in URI parts.

encodeURI in less common, and misleadingly named: it should really be called fixBrokenURI. It takes something that's nearly a URI, but has invalid characters such as spaces in it, and turns it into a real URI. It has a valid use in fixing up invalid URIs from user input, and it can also be used to turn an IRI (URI with bare Unicode characters in) into a plain URI (using %-escaped UTF-8 to encode the non-ASCII).

Where encodeURI should really be named fixBrokenURI(), decodeURI() could equally be called potentiallyBreakMyPreviouslyWorkingURI(). I can think of no valid use for it anywhere; avoid.

Ben McCann
  • 18,548
  • 25
  • 83
  • 101
bobince
  • 528,062
  • 107
  • 651
  • 834
  • 12
    decodeURI(encodeURI('%20 ')) gives '%20 ' correctly in ie, chrome and firefox, just wondering from which browser/version the incorrect result you observed? – ccppjava Dec 06 '12 at 14:23
  • 1
    Might have been broken in 2009 but modern browser caught up in the meantime (my guess). – WoodrowShigeru Dec 31 '16 at 10:25
82
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

Looks like encodeURI produces a "safe" URI by encoding spaces and some other (e.g. nonprintable) characters, whereas encodeURIComponent additionally encodes the colon and slash and plus characters, and is meant to be used in query strings. The encoding of + and ? and & is of particular importance here, as these are special chars in query strings.

zanetu
  • 3,740
  • 1
  • 21
  • 17
Jason S
  • 184,598
  • 164
  • 608
  • 970
37

As I had the same question, but didn't find the answer here, I made some tests in order to figure out what the difference actually is. I did this, since I need the encoding for something, which is not URL/URI related.

  • encodeURIComponent("A") returns "A", it does not encode "A" to "%41"
  • decodeURIComponent("%41") returns "A".
  • encodeURI("A") returns "A", it does not encode "A" to "%41"
  • decodeURI("%41") returns "A".

-That means both can decode alphanumeric characters, even though they did not encode them. However...

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

Even though encodeURIComponent does not encode all characters, decodeURIComponent can decode any value between %00 and %7F.

Note: It appears that if you try to decode a value above %7F (unless it's a unicode value), then your script will fail with an "URI error".

Kul-Tigin
  • 16,728
  • 1
  • 35
  • 64
  • Note: There is a typo in first decodeURIComponent (m instead of n). I cannot correct it, because I have to edit at least 6 characters. – SuperNova Oct 13 '16 at 07:34
  • In other words the decode functions will throw an exception if the decoded bytes do not make for a valid UTF-8 sequence. Once you go beyond %7F, you are into multi-byte sequences. So for example %D0%B0 is valid, but %80 is not. – David42 Jan 04 '22 at 03:07
31

encodeURIComponent()

Converts the input into a URL-encoded string

encodeURI()

URL-encodes the input, but assumes a full URL is given, so returns a valid URL by not encoding the protocol (e.g. http://) and host name (e.g. www.stackoverflow.com).

decodeURIComponent() and decodeURI() are the opposite of the above

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
15

decodeURIComponent will decode URI special markers such as &, ?, #, etc, decodeURI will not.

Bjorn
  • 69,215
  • 39
  • 136
  • 164
7

encodeURIComponent Not Escaped:

A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURI() Not Escaped:

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Michael Gu
  • 71
  • 1
  • 3
0

Encode URI:

The encodeURI() method does not encodes:

, / ? : @ & = + $ * #

Example

URI: https://my test.asp?name=ståle&car=saab
Encoded URI: https://my%20test.asp?name=st%C3%A5le&car=saab

Encode URI Component:

The encodeURIComponent() method also encodes:

, / ? : @ & = + $ #

Example

URI: https://my test.asp?name=ståle&car=saab
Encoded URI: https%3A%2F%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab

For More: W3Schoools.com

Kashif Iftikhar
  • 284
  • 1
  • 9
  • 28