Should I use encodeURI or encodeURIComponent for encoding URLs?
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
var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);
When are you supposed to use escape instead of encodeURI / encodeURIComponent?
escape()
Don't use it!escape()
is defined in section B.2.1.2 escape and the introduction text of Annex B says:
... All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. ...
... Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code....
Behaviour:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape
Special characters are encoded with the exception of: @*_+-./
The hexadecimal form for characters, whose code unit value is 0xFF or less, is a two-digit escape sequence: %xx
.
For characters with a greater code unit, the four-digit format %uxxxx
is used. This is not allowed within a query string (as defined in RFC3986):
query = *( pchar / "/" / "?" )
pchar = unreserved / pct-encoded / sub-delims / ":" / "@"
unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded = "%" HEXDIG HEXDIG
sub-delims = "!" / "$" / "&" / "'" / "(" / ")"
/ "*" / "+" / "," / ";" / "="
A percent sign is only allowed if it is directly followed by two hexdigits, percent followed by u
is not allowed.
encodeURI()
Use encodeURI when you want a working URL. Make this call:
encodeURI("http://www.example.org/a file with spaces.html")
to get:
http://www.example.org/a%20file%20with%20spaces.html
Don't call encodeURIComponent since it would destroy the URL and return
http%3A%2F%2Fwww.example.org%2Fa%20file%20with%20spaces.html
Note that encodeURI, like encodeURIComponent, does not escape the ' character.
encodeURIComponent()
Use encodeURIComponent when you want to encode the value of a URL parameter.
var p1 = encodeURIComponent("http://example.org/?a=12&b=55")
Then you may create the URL you need:
var url = "http://example.net/?param1=" + p1 + "¶m2=99";
And you will get this complete URL:
http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55¶m2=99
Note that encodeURIComponent does not escape the '
character. A common bug is to use it to create html attributes such as href='MyUrl'
, which could suffer an injection bug. If you are constructing html from strings, either use "
instead of '
for attribute quotes, or add an extra layer of encoding ('
can be encoded as %27).
For more information on this type of encoding you can check: http://en.wikipedia.org/wiki/Percent-encoding
should encodeURI ever be used?
I have a blog post which answers this question in a lot of detail.
You should never use encodeURI
to construct a URI programmatically, for the reasons you say -- you should always use encodeURIComponent
on the individual components, and then compose them into a complete URI.
Where encodeURI
is almost useful is in "cleaning" a URI, in accordance with Postel's Law ("Be liberal in what you accept, and conservative in what you send.") If someone gives you a complete URI, it may contain illegal characters, such as spaces, certain ASCII characters (such as double-quotes) and Unicode characters. encodeURI
can be used to convert those illegal characters into legal percent-escaped sequences, without encoding delimiters. Similarly, decodeURI
can be used to "pretty-print" a URI, showing percent-escaped sequences as technically-illegal bare characters.
For example, the URL:
http://example.com/admin/login?name=Helen Ødegård&gender=f
is illegal, but it is still completely unambiguous. encodeURI
converts it into the valid URI:
http://example.com/admin/login?name=Helen%20%C3%98deg%C3%A5rd&gender=f
An example of an application that might want to do this sort of "URI cleaning" is a web browser. When you type a URL into the address bar, it should attempt to convert any illegal characters into percent-escapes, rather than just having an error. Software that processes URIs (e.g., an HTML scraper that wants to get all the URLs in hyperlinks on a page) may also want to apply this kind of cleaning in case any of the URLs are technically illegal.
Unfortunately, encodeURI
has a critical flaw, which is that it escapes '%' characters, making it completely useless for URI cleaning (it will double-escape any URI that already had percent-escapes). I have therefore borrowed Mozilla's fixedEncodeURI function and improved it so that it correctly cleans URIs:
function fixedEncodeURI(str) {
return encodeURI(str).replace(/%25/g, '%').replace(/%5B/g, '[').replace(/%5D/g, ']');
}
So you should always use encodeURIComponent
to construct URIs internally. You should only never use encodeURI
, but you can use my fixedEncodeURI
to attempt to "clean up" URIs that have been supplied from an external source (usually as part of a user interface).
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")) // = )
If I am encoding a URI which will be used as a query string parameter: encodeURI or encodeURIComponent
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
Encode URL in JavaScript
Check out the built-in function encodeURIComponent(str) and encodeURI(str).
In your case, this should work:
var myOtherUrl =
"http://example.com/index.html?url=" + encodeURIComponent(myUrl);
encoding url in javascript not encoding &
Does not encode characters that have special meaning (reserved
characters) for a URI. The following example shows all the parts that
a URI "scheme" can possibly contain.
Reference
encodeURI
will not encode following special charcaters
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
let uri = "?qry=M & L"
console.log(encodeURI(uri))
Related Topics
Write/Add Data in JSON File Using Node.Js
Why Would Multiple Simultaneous Ajax Calls to the Same ASP.NET MVC Action Cause the Browser to Block
What Is "Function*" in JavaScript
How to Debug Jquery Ajax Calls
Create a String of Variable Length, Filled with a Repeated Character
Where Should I Declare JavaScript Files Used in My Page? in <Head></Head> or Near </Body>
Set Default Value for a Input File Form
Dynamically Using the First Frame as Poster in HTML5 Video
Bootstrap Dropdown Closing When Clicked
Should I Use Encodeuri or Encodeuricomponent for Encoding Urls
How to Terminate the Script in JavaScript
How to Prevent Default Event Handling in an Onclick Method
Regex to Check Whether a String Contains Only Numbers
Prevent Orientation Change in iOS Safari
Bootstrap V2 Dropdown Navigation Not Working on Mobile Browsers