Now we all know what is an URL, an Uniform resource locator which is used for locating a document or any other data on web. It could be a website name like www.saphotos.com or an IP address like 192.168.0.105. Mostly people enter names of the websites as they are easy to remember. Isn’t?
Web browsers request the pages from web servers with the help of URLs.
What is URL Encoding?
URL encoding is the process of replacing unprintable or unrecognizable characters with the characters that are universally accepted by web browsers and servers. It is actually the process of converting string into a valid URL format.
Why would you use URL Encoding?
URLs which contain ASCII characters can only be sent over internet. The URLs may contain characters that are out of ASCII set or they may contain some characters which have special meaning or some reserved characters. So, we need to encode the URLs so that they can be transmitted over the internet. URL encoding is also called Percent-Encoding.
Percent Encoding
Encoding is done by replacing the desired character with three characters, a percentile sign(%) followed by two Hexa decimal digits that corresponds to the certain character in the encoding table.
URLs cannot contain spaces. Spaces are usually replaced by using either ‘+’ or ‘%20’. According to new percent encoding rules, spaces are replaced with ‘+’ not ‘%20’.
When would you use URL ENCODING?
URL Encoding is normally used in HTML Forms. The special characters which we send from forms like “#”, “.”, “/” etc may carry some special meaning. For example, “#” is used to specify an anchor. So, it needs to be encoded as “%23”
The get and post methods of forms perform URL encoding implicitly. As you know, these methods are used to pass parameters in HTML Forms.
An example program
<html> <body> <form method="GET" action="firstjs.html"> <input type="text" name="name1" size="25" value="URL Encoding"> <input type="submit"> </form> </body> </html>
The above program would give the following output.
As we have used the method ”get” in the form, when you click on submit button, the characters in the input area “URL Encoding “would be sent by encoding. Please look at the address bar in the screenshot below, the string “URL Encoding” is appended as name1=URL+Encoding.
Space is encoded as “+”.
Built in methods
Many languages offer support for URL encoding. They have built in functions to perform encoding and decoding.
In JavaScript, we have encodeURI() function for this purpose.
Encoding Table
| HEX Value | Character |
| 20 | <SPACE> |
| 21 | ! |
| 22 | " |
| 23 | # |
| 24 | $ |
| 25 | % |
| 26 | & |
| 27 | ' |
| 28 | ( |
| 29 | ) |
| 2A | * |
| 2B | + |
| 2C | , |
| 2D | - |
| 2E | . |
| 2F | / |
| 30 | 0 |
| 31 | 1 |
| 32 | 2 |
| 33 | 3 |
| 34 | 4 |
| 35 | 5 |
| 36 | 6 |
| 37 | 7 |
| 38 | 8 |
| 39 | 9 |
| 3A | : |
| 3B | ; |
| 3C | < |
| 3D | = |
| 3E | > |
| 3F | ? |
| 40 | @ |
| 41 | A |
| 42 | B |
| 43 | C |
| 44 | D |
| 45 | E |
| 46 | F |
| 47 | G |
| 48 | H |
| 49 | I |
| 4A | J |
| 4B | K |
| 4C | L |
| 4D | M |
| 4E | N |
| 4F | O |
| 50 | P |
| 51 | Q |
| 52 | R |
| 53 | S |
| 54 | T |
| 55 | U |
| 56 | V |
| 57 | W |
| 58 | X |
| 59 | Y |
| 5A | Z |
| 5B | [ |
| 5C | \ |
| 5D | ] |
| 5E | ^ |
| 5F | _ |
| 60 | ` |
| 61 | a |
| 62 | b |
| 63 | c |
| 64 | d |
| 65 | e |
| 66 | f |
| 67 | g |
| 68 | h |
| 69 | i |
| 6A | j |
| 6B | k |
| 6C | l |
| 6D | m |
| 6E | n |
| 6F | o |
| 70 | p |
| 71 | q |
| 72 | r |
| 73 | s |
| 74 | t |
| 75 | u |
| 76 | v |
| 77 | w |
| 78 | x |
| 79 | y |
| 7A | z |
| 7B | { |
| 7C | | |
| 7D | } |
| 7E | ~ |
| 7F | <DEL> |
| 60 | ` |
| 61 | a |
| 62 | b |
| 63 | c |
| 64 | d |
| 65 | e |
| 66 | f |
| 67 | g |
| 68 | h |
| 69 | i |
| 6A | j |
| 6B | k |
| 6C | l |
| 6D | m |
| 6E | n |
| 6F | o |
| 70 | p |
| 71 | q |
| 72 | r |
| 73 | s |
| 74 | t |
| 75 | u |
| 76 | v |
| 77 | w |
| 78 | x |
| 79 | y |
| 7A | z |
| 7B | { |
| 7C | | |
| 7D | } |
| 7E | ~ |
| 7F | <DEL> |