Should I use encodeURI or encodeURIComponent for encoding URLs?

Question

Which of these two methods should be used for encoding URLs?

One major difference is that `encodeURI` won't encode `/` so: `encodeURIComponent("ac/dc")` => `ac%2Fdc` and `encodeURI("ac/dc")` => `ac/dc` — , May 19 '16 at 11:02
This might be helpful: `"encodeURIComponent() and encodeURI() encode a URI by replacing URL reserved characters with their UTF-8 encoding....They differ because encodeURI does not encode queryString or hash values...URLs do not allow many special characters, like spaces or slashes. However these special characters are part of life, so URL encoding was invented."` [Source](https://love2dev.com/blog/whats-the-difference-between-encodeuri-and-encodeuricomponent) — user1063287, Aug 07 '19 at 08:37
Also see specific section titled `encodeURIComponent differs from encodeURI as follows` at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#Description — user1063287, Aug 07 '19 at 08:43

score 460 · Accepted Answer · edited Jul 04 '23 at 10:48

It depends on what you are actually wanting to do.

encodeURI assumes that the input is a complete URI that might have some characters which need encoding in it.

encodeURIComponent will encode everything with special meaning, so you use it for components of URIs such as:

const world = 'A string with symbols & characters that have special meaning?'
const uri = 'http://example.com/foo?hello=' + encodeURIComponent(world)

score 176 · Answer 2 · answered Dec 27 '10 at 18:14

176

If you're encoding a string to put in a URL component (a querystring parameter), you should call encodeURIComponent.

If you're encoding an existing URL, call encodeURI.

answered Dec 27 '10 at 18:14

SLaks

868,454
176
1,908
1,964

2

If i am using ajax how do i decode the url which is passed to php? – Aditya Shukla Dec 27 '10 at 18:19
9

You don't. The webserver does that automatically. – Quentin Dec 27 '10 at 18:23
@Aditya: It depends what you're doing. – SLaks Dec 27 '10 at 18:23
@slaks .I am passing parameters via get so I want to retrieve them in php. – Aditya Shukla Dec 27 '10 at 18:25
@david So if let's say i use encodeURICompenent to encode the parameters passed via get then apache would give me a decoded url from which i could access the parameters? – Aditya Shukla Dec 27 '10 at 18:28
3

Well. I might have spoken a bit hastily when I said the *webserver* would do it, but whatever library you use to read your form data will take care of it for you. – Quentin Dec 27 '10 at 18:29
You need to call `encodeURIComponent` on each parameter. (Note that your AJAX library might do that for you). Most server-side frameworks will decode the parameters for you. – SLaks Dec 27 '10 at 18:31
@slaks Well I am not using any ajax library , just using simple javascript. – Aditya Shukla Dec 27 '10 at 19:35
@slacks I will try that and post it back here. – Aditya Shukla Dec 27 '10 at 20:00
@SLaks You're right about %20 being correct for spaces. That comment was supposed to be deleted. I poorly misdiagnosed an issue that caused my head to spin and make that comment. It's deleted now (I hope). – Michael Khalili Sep 18 '15 at 11:02

score 59 · Answer 3 · edited Mar 28 '18 at 16:09

xkr.us has a great discussion, with examples. To quote their summary:

The escape() method does not encode the + character which is interpreted as a space on the server side as well as generated by forms with spaces in their fields. Due to this shortcoming and the fact that this function fails to handle non-ASCII characters correctly, you should avoid use of escape() whenever possible. The best alternative is usually encodeURIComponent().

escape() will not encode: @*/+

Use of the encodeURI() method is a bit more specialized than escape() in that it encodes for URIs as opposed to the querystring, which is part of a URL. Use this method when you need to encode a string to be used for any resource that uses URIs and needs certain characters to remain un-encoded. Note that this method does not encode the ' character, as it is a valid character within URIs.

encodeURI() will not encode: ~!@#$&*()=:/,;?+'

Lastly, the encodeURIComponent() method should be used in most cases when encoding a single component of a URI. This method will encode certain chars that would normally be recognized as special chars for URIs so that many components may be included. Note that this method does not encode the ' character, as it is a valid character within URIs.

encodeURIComponent() will not encode: ~!*()'

Recently learned. TOMCAT 9 servers are more particular about what you can send to the URL. encodeURIComponent() appears to work better in cases where you have "spaces" in what you need to encode. Tomcat 8 did not care but 9 is way more particular. — Aggie Jon of 87, Dec 13 '19 at 21:18
So in other words `encodeURI` fails if you're trying to convert a filename to a URL and the filename has `#` in it — gman, Mar 31 '20 at 18:00

score 56 · Answer 4 · edited Dec 03 '22 at 18:57

56

Here is a summary.

escape() will not encode @ * _ + - . /

Do not use it.
encodeURI() will not encode A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

Use it when your input is a complete URL like 'https://searchexample.com/search?q=wiki'
encodeURIComponent() will not encode A-Z a-z 0-9 - _ . ! ~ * ' ( )

Use it when your input is part of a complete URL e.g const queryStr = encodeURIComponent(someString)

edited Dec 03 '22 at 18:57

Leonidas A

329
2
11

answered Jun 20 '18 at 08:13

Frank Wang

594
5
5

3

This is an excellent answer because it tells exactly what they do. However I still have a question about which should I use and when. What if my URI -component is a complete URL? Should I then use Rule 2 or Rule 3 from above OR perhaps BOTH like encodeURIComponent ( encodeURI (theCompleteURI )) – Panu Logic Aug 01 '18 at 18:10
1

if you want to put a complete URL into a query parameter then use encodeURIComponent e.g. `https://example.test/?url=https%3A%2F%2Fexample.test%2fhome` – Paul Watson May 28 '21 at 09:19
What happens if I use encodeURIComponent to encode complete url ? Will that break something ? When is it necessary to use encodeURI() and MUST not use encodeURIComponent() – marcg Mar 25 '23 at 13:19

Pulkit Aggarwal · Answer 5 · 2021-06-01T04:30:56.107

encodeURI and encodeURIComponent are used for different purposes.
Some of the difference are

encodeURI is used to encode a full URL whereas encodeURIComponent is used for encoding a URI component such as a query string.
There are 11 characters which are not encoded by encodeURI, but encoded by encodeURIComponent. List:

Character	encodeURI	encodeURIComponent
#	#	%23
$	$	%24
&	&	%26
+	+	%2B
,	,	%2C
/	/	%2F
:	:	%3A
;	;	%3B
=	=	%3D
?	?	%3F
@	@	%40

Notes:
encodeURIComponent does not encode -_.!~*'(). If you want to these characters are encoded, you have to replace them with a corresponding UTF-8 sequence of characters

If you want to learn more about encodeURI and encodeURIComponent, please check the reference link. Reference Link

score 12 · Answer 6 · answered Dec 10 '14 at 12:29

encodeURIComponent() : assumes that its argument is a portion (such as the protocol, hostname, path, or query string) of a URI. Therefore it escapes the punctuation characters that are used to separate the portionsof a URI.

encodeURI(): is used for encoding existing url

T.Todua · Answer 7 · 2018-10-24T09:42:19.930

11

Difference between `encodeURI` and `encodeURIComponent`:

encodeURIComponent(value) is mainly used to encode queryString parameter values, and it encodes every applicable character in value. encodeURI ignores protocol prefix (http://) and domain name.

In very, very rare cases, when you want to implement manual encoding to encode additional characters (though they don't need to be encoded in typical cases) like: ! * , then you might use:

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

(source)

edited Oct 24 '18 at 09:42

answered Mar 07 '17 at 12:45

T.Todua

53,146
19
236
237

6

You should not escape those charachters in url. – Arashsoft Apr 13 '17 at 17:05
As the cited documentation says: "these characters have no formalized URI delimiting uses" – caesarsol Oct 24 '17 at 08:46
@caesarsol so, should I edit my answer. let me know your thoughts because I cant understand what that cited documentation means.. – T.Todua Oct 31 '17 at 07:27
its just useless to encode these chars, unless you are doing something out of the normal URL-encoding use cases :) – caesarsol Nov 10 '17 at 18:11
Great answer, upvoted! I'm not sure why people are saying it's useless to encode `"*"`; if anyone thinks it's useless to encode `*`, feel free to run `rm *` on your home directory. – HoldOffHunger Feb 10 '22 at 17:59

score 5 · Answer 8 · answered May 16 '18 at 21:23

Other answers describe the purposes. Here are the characters each function will actually convert:

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

All characters above are converted to percent-hexadecimal codes. Space to %20, percent to %25, etc. The characters below pass through unchanged.

Here are the characters the functions will NOT convert:

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

score -1 · Answer 9 · answered Jul 05 '17 at 17:54

As a general rule use encodeURIComponent. Don't be scared of the long name thinking it's more specific in it's use, to me it's the more commonly used method. Also don't be suckered into using encodeURI because you tested it and it appears to be encoding properly, it's probably not what you meant to use and even though your simple test using "Fred" in a first name field worked, you'll find later when you use more advanced text like adding an ampersand or a hashtag it will fail. You can look at the other answers for the reasons why this is.

Should I use encodeURI or encodeURIComponent for encoding URLs?

9 Answers9

Difference between `encodeURI` and `encodeURIComponent`:

Linked

Related

Should I use encodeURI or encodeURIComponent for encoding URLs?

9 Answers9

Difference between encodeURI and encodeURIComponent:

Linked

Related

Difference between `encodeURI` and `encodeURIComponent`: