👨‍💻JavaScript encodeURI() vs encodeURIComponent() and decodeuricomponent()

Chris Love

Last Updated - Sat Jan 09 2021

It seems like just about every project I work on needs to dynamically create url routes.

This means I need to use a value, more than likely a string, to create the route.

encodeURIComponent() and encodeURI() encodes a URI by replacing URL reserved characters with their UTF-8 encoding.

More specifically these functions return 1-4 character escape sequence characters use as a 'code' to represent the reserved characters.

They differ because encodeURI does not encode queryString or hash values.

In a Single Page App the route is applied either as a hash fragment or queryString parameter.

A common issue is special characters and spaces.

URLs do not allow many special characters, like spaces or slashes. However these special characters are part of life, so URL encoding was invented.

This is where the special characters are replaced by a token value, usually beginning with a % followed by a number. The number correlates to the ASCII character hex value, for example a space is converted to %20, an ! is converted to %21 and so on.

While most browsers will auto convert characters like spaces to the URL encoded value of %20 there are always exceptions. Fortunately browsers provide native URL encoding and decoding functions: encodeURI, encodeURIComponent and decodeURI, decodeURIComponent. The question is how to use these functions and what the differences are between the Component and plain versions. First what each function does and how to use them.

encodeURI()

URL encoding a value is simple, just call encodeURI, passing the string value you need to convert. The function returns the URL encoded value.

encodeURI("http://www.yourdomain.com/a file with spaces.html");

to get:

http://www.yourdomain.com/a%20file%20with%20spaces.html

decodeURI()

This works in reverse, taking an encodes string and replacing the tokens with the normal characters. Call decodeURI, passing the encoded string value you need to convert. The function returns the decoded, normal text value.

decodeURI("http://www.yourdomain.com/a%20file%20with%20spaces.html");

to get:

http://www.yourdomain.com/a file with spaces.html

encodeURIComponent()

The encodeURIComponent function should be used to encode queryString parameters, in particular URLs. The difference between encodeURI and encodeURIComponent is encodeURIComponent encodes the entire string, where encodeURI ignores protocol prefix ('http://') and domain name. encodeURIComponent is designed to encode everything, where encodeURI ignores a URL's domain related roots.

Use encodeURIComponent when you want to encode a URL parameter.param1 = encodeURIComponent("http://xyz.com/?a=12&b=55");

Then you may create the URL you need:url = "http://domain.com/?param1=" + param1 + "¶m2=99";

And you will get this complete URL:

http://www.domain.com/?param1=http%3A%2F%2Fxyz.com%2F%3Fa%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).

decodeURIComponent()

Again decodeURIComponent reverses a string's URL encoding and returns a normal text value.

var decoded = decodeURIComponent("http://www.domain.com/?param1=http%3A%2F%2Fxyz.com%2F%3Fa%3D12%26b%3D55¶m2=99");

which returns a decoded value of "http://www.domain.com/?param1=http://xyz.com/?a=12&b=55¶m2=99".

Summary

The encodeURI and decodeURI functions are nice native utility API functions, enabling developers to encode values quickly. By having native functions applications are safe to avoid extra JavaScript to perform the same tasks, plus native functions execute faster. So the next time you need to use user enter strings you can ensure your dynamic routes and queryString values will properly resolve and avoid some rather tricky bugs. These functions are invaluable for today's modern, single page web applications.