Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
131
rated 0 times [  136] [ 5]  / answers: 1 / hits: 23845  / 12 Years ago, sun, september 23, 2012, 12:00:00

From old post: Should I use encodeURI or encodeURIComponent for encoding URLs?, it said:



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


What if I need to encode the URI as query string parameter?



e.g.



var url = http://example.com/?next= + encodeURI(url) 

or


var url = http://example.com/?next= + encodeURIComponent(url)

More From » javascript

 Answers
376

If you want to encode a query string, use encodeURIComponent. The reason is simple: among a few other chars, it'll encode the forward slash and amersand that encodeURI will not.



encodeURIComponent



What's the use? Say you want to encode a URL and pass it in the query string, this will let you encode all the characters so you get something like this:



encodeURIComponent('http://abc.com/my page.html?name=bob&foo=bar')


to get the result



http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar


You can now safely pass that as a query string like so:



http://mysite.com/foo=http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar


Notice how both URLs have a query string parameter foo but that's OK because the encoded URL has that encoded. The entire foo parameter is



http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar


There is no conflict with the foo=bar in the second, encoded, URL.



encodeURI



Now, if you want to encode a complete URL that you have already, use encodeURI.



encodeURI('http://abc.com/my page.html?name=bob&foo=bar')


Will give you



http://abc.com/my%20page.html?name=bob&foo=bar


Notice how that keeps the URL valid and, in this instance, only encodes the space. If you were to run encodeURIComponent on that, you'd get the mess you see in my first example.



What characters are encoded?



As yabol commented in your first post, this page shows you the Differences between encodeURI, encodeURIComponent, and escape: lower ASCII characters. You notice specifically that encodeURIComponent encodes the following chars that encodeURI does not:



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


Your question



You are correct in using encodeURIComponent because you're encoding a URL for a query string. This goes back to my first example. If your query-string URL (the one you're encoding) has a query string, you want that to be part of next, not part of your main URL.



Wrong



http://example.com/?next= + encodeURI('http://abc.com/my page.html?name=bob&foo=bar')
http://example.com/?next=http://abc.com/my%20page.html?name=bob&foo=bar


Your example.com url has two query string parameters: next and foo



Right



http://example.com/?next= + encodeURIComponent('http://abc.com/my page.html?foo=bar')
http://example.com/?next=http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar


Your example.com url contains only one query string parameter: next


[#82945] Friday, September 21, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
devinjadong

Total Points: 711
Total Questions: 117
Total Answers: 100

Location: Andorra
Member since Sat, May 27, 2023
1 Year ago
devinjadong questions
Thu, Feb 17, 22, 00:00, 2 Years ago
Wed, Dec 8, 21, 00:00, 2 Years ago
Tue, Oct 27, 20, 00:00, 4 Years ago
Fri, Oct 18, 19, 00:00, 5 Years ago
;