Differencebetween Decodeuricomponent and Decodeuri

What is the difference between decodeURIComponent and decodeURI?

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.

what is the difference between encodeURI and decodeUri

Use encodeURIComponent and decodeURIComponent. Note, neither function is idempotent; If you accidentally double-encode a component, you will have to double-decode it -

console.log  ( encodeURIComponent ("=")     // %3D  , decodeURIComponent ("%3D")   // =
  , encodeURIComponent ("%3D")   // %253D  , decodeURIComponent ("%253D") // %3D
  , encodeURIComponent (encodeURIComponent ("="))     // %253D  , decodeURIComponent (decodeURIComponent ("%253D")) // =  )

Is there a problem to use decodeURIComponent to decoding the string witch coding with encode method

Here is the output of all the functions:

Input string: https://www.google.co.in/

Output string from encodeURI: https://www.google.co.in/

Output string from encodeURIComponent: https%3A%2F%2Fwww.google.co.in%2F

Now you decode the result of encodeURI with decodeURI and decodeURIComponent it will give you the same result. But if you decode the result of encodeURIComponent it will give you following result.

Input string: https%3A%2F%2Fwww.google.co.in%2F

Output string from decodeURI: https%3A%2F%2Fwww.google.co.in%2F

Output string from decodeURIComponent: https://www.google.co.in/

So conclusion is decodeURIComponent is designed to decode everything so it is safe to use it as per its specification means decodeURI with encodeURI and decodeURIComponent with encodeURIComponent.

Why can't decodeURIComponent or decodeURI decode hello+world to hello world in JavaScript?

The behavior of decideURIComponent is defined as "inverse" operation of encodeURIComponent:

The decodeURIComponent function computes a new version of a URI in which each escape sequence and UTF-8 encoding of the sort that might be introduced by the encodeURIComponent function is replaced with the character that it represents.

And encodeURIComponent does not replace spaces with +, but with %20.

(similar for decodeURI)

If "+" is valid, surely, there has to be a built-in function in JavaScript that can convert "hello+world" to "hello world"?

Of course there is:

"hello+world".replace(/\+/g, ' ');

can someone tell me the why we need decodeURIComponent

As defined in the RFC 3986, URIs can only contain the characters -_.~a-zA-Z0-9 and :/?#[]@!$&'()*+,;=, where the latter group has some special meaning. By restricting to these characters, URLs are clearly delimited (usually by a space or newline) and survive through proxies and other services that have trouble handling non-ASCII characters.

If you fill in a GET form, the user input will be encoded. For instance, if you google for Hellö Lädies&Gentlemen+Bob, the browser will request

https://www.google.com/search?q=Hell%C3%B6+L%C3%A4dies%26Gentlemen%2BBob

You see that all non-ASCII characters and the ampersand(&) have been encoded with a percent signs and the hexadecimal representation of the characters in UTF-8 encoding.

The space character is handled differently; since it is very common in user input it got assigned the shorter character +. That means + has to be percent-encoded as well, as %2B.

The code you have extracts the GET parameter name from the URL. If it is there, the final line

return decodeURIComponent(results[2].replace(/\+/g, ' '));

first undoes the encoding of spaces as +.

decodeURIComponent is then used to get the value of the name parameter. For instance, if the user inputted a name of name of René Müller&勒内穆勒, the browser will send name=Ren%C3%A9+M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92, and decodeURIComponent will yield the original input (try it yourself):

> decodeURIComponent('Ren%C3%A9 M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92')
'René Müller&勒内穆勒'

Decoding URL parameters with JavaScript

Yes it is true that decodeURIComponent function doesn't convert + to space. So you have to replace the + using replace function.

Ideally the below solution works.

var str_name = 'This+is+a+message+with+spaces';
decodeURIComponent((str_name + '').replace(/\+/g, '%20'));