URL Encoder

URL Encoding Overview

What Is URL Encoding?

URL Encoding is the process of converting certain characters in a URL, like spaces and non-English characters, into special codes when needed so that there is no confusion by the web browser or server as to what is intended by the user. The special codes will be in the format of a percent sign (%) followed by the hexadecimal ASCII code of the character.

For example, a regular space will be in the format of %20 because 20 is the hexadecimal code for the spacebar in the ASCII table.

When is URL Encoding Used?

A URL is used to locate a resource, such as a website or image, on the internet. The most common format we see is of the form http://www.example.com/index.html, but there are many other possible options that only programmers typically need to worry about. For example, you can specify the port number by adding a colon followed by the port number. The default port is 80 and the web browser knows to add this automatically, if it's missing, every time you visit a website. However, you can add it yourself, or specify a different port, by doing something like http://www.example.com:80/index.html. If you just wanted to represent the ":80" without the web browser thinking it is the port number, you'd need to escape the semi-colon by encoding it. Since 3A is the ASCII code for a semi-colon, the percent-encoded result becomes %3A. Encoding the string ":80" then becomes %3A80.

The most common places you'll see URL encoding is when there are spaces in the filename or when using the URL query string. The query string allows extra parameters or variables to be added to the URL. The parameters are name/value pairs with an equals sign (=) that appear at the end of a URL after a question mark (?) and are separated with ampersands (&). The format looks something like: http://www.example.com/index.html?x=hello%20world&var2=123. If you've ever used YouTube, you'll notice that the video id is assigned this way by setting the v parameter, e.g. https://www.youtube.com/watch?v=GaoLU6zKaws

Which Characters Need Encoding?

Characters allowed in a URL are either reserved or unreserved. Reserved characters are those characters that sometimes have special meaning. For example, forward slash characters are used to separate different parts of a URL. Unreserved characters have no such meanings. Reserved characters are the ones that sometimes require encoding.

Unreserved Characters

Reserved Characters

Commonly Encoded Characters

Type application/x-www-form-urlencoded

This way of encoding data is very similar to the ways shown above but with the main difference that spaces are encoded with a plus sign + instead of the percent encoded %20. For example, Hello World would be encoded as Hello+World instead of Hello%20World. It does not matter which you use in query parameters after the question mark (?) in the URL, but they are not interchangeable in the part of the URL before the question mark (?).

Should I Encode Spaces with %20 or a Plus Sign?

In the part of the URL before the question mark (?), %20 must be used to encode spaces. In the query string after the question mark (?), however, it's up to you. Different languages may prefer one or the other. %20 will probably be easier to work with, however + looks nicer and may give a better front-end user experience.

More discussion on Stack Overflow

JavaScript

JavaScript provides the following four methods for encoding and decoding URLs and URL parameters.

Methods

encodeURI( URI )

The encodeURI function encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character. It does not encode characters that have special meaning (reserved characters) for a URI.

This method should not be used to encode URL GET parameters or form POST data, instead use encodeURIComponent.

Read Docs

decodeURI( str )

The decodeURI function replaces each escape sequence in the encoded URI with the character that it represents, but does not decode escape sequences that could not have been introduced by encodeURI. The character “#” is not decoded from escape sequences.

Read Docs

encodeURIComponent( URI )

The encodeURIComponent function escapes all characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( ).

Use this method to encode URL GET parameters and form POST data.

Read Docs

decodeURIComponent( str )

The decodeURIComponent function decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent or by a similar routine.

Read Docs

More Info: Stack Overflow

Examples

var reserved = ";,/?:@&=+$#";
var unreserved = "-_.!~*'()";
var alphaNum = "ABC def 123";

encodeURI(reserved);   // ;,/?:@&=+$#
encodeURI(unreserved); // -_.!~*'()
encodeURI(alphaNum);   // ABC%20def%20123 (the space gets encoded as %20)

encodeURIComponent(reserved);   // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
encodeURIComponent(unreserved); // -_.!~*'()
encodeURIComponent(alphaNum);   // ABC%20def%20123 (the space gets encoded as %20)

Be careful when dealing with URL parameters. They need to be encoded separately, as our demo at the top of this page also does.

var url = "http://example.com";
var params = "?var1=hello world&var2=http://example.com&xyz";
var longURL = url + params;

encodeURI(longURL); 
//-> http://example.com?var1=hello%20world&var2=http://example.com&xyz
// var2 does not get properly encoded.

url + encodeURIComponent(params); 
//-> http://example.com%3Fvar1%3Dhello%20world%26var2%3Dhttp%3A%2F%2Fexample.com%26xyz
// URL parameters get destroyed. Must manually encode each value in the key/value pair.

To fix the above example, we must separate the query string from the URL and then encode each value in the URL parameter key/value pairs separately.

function getJsonFromUrl(url) {
  var query = url;
  var result = {};
  query.split("&").forEach(function(part) {
    var item = part.split("=");
    result[item[0]] = decodeURIComponent(item[1]);
  });
  return result;
}

var url = "http://example.com";
var params = "?var1=hello world&var2=http://example.com&xyz";
var longURL = url + params;

var parts = longURL.split('?');
var result = "";
var params;

url = parts[0];
result += encodeURI(url);

if (parts.length > 1) {
  result += "?";
  params = getJsonFromUrl(parts[1]);
}

var paramsArr = []
for(var key in params) {
  var value = encodeURIComponent(params[key]);
  if (value === 'undefined') value = ""
  paramsArr.push(key + '=' + value);
}

result += paramsArr.join('&');
//-> http://example.com?var1=hello%20world&var2=http%3A%2F%2Fexample.com&xyz=