jQuery Encode/Decode URL String

By Sam Deering

Simple jQuery code snippet to encode/decode (convert) a href params in a url string (http address) so that they can be properly viewed on a web page. For example, %20 is the html equivalent of a space and %40 is an ampersand (@).

Encode URL String

var url = $(location).attr('href'); //get current url
var url = 'folder/index.html?param=#23dd&noob=yes'; //or specify one

var encodedUrl = encodeURIComponent(url);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes

Decode URL String

var url = $(location).attr('href'); //get current url
var url = 'folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes'; //or specify one

var decodedUrl = decodeURIComponent(url);
//outputs  folder/index.html?param=#23dd&noob=yes

HTML URL Endoding References

space 	%20
! 	%21
" 	%22
# 	%23
$ 	%24
% 	%25
& 	%26
' 	%27
( 	%28
) 	%29
* 	%2A
+ 	%2B
, 	%2C
- 	%2D
. 	%2E
/ 	%2F

See all HTML URL Endoding References

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • Giorgio

    Simply and direct.
    thanks :)

  • Soy Pedro no Pedrito


  • praba

    superub with exclamatory mark..!

  • Rajan

    Thank you. Lines are small but very important. Thanks again

  • Navratan

    decodeURIComponent shows ‘+’ instead of any space ??

  • varalakshmi

    Thanks for the solution…

  • Andy

    thanks so much. its very useful.

  • Ramiro Arizpe

    Thanks for your help! Works like a charm!

  • mf★rader

    Thanks, Sam. A little remark: an ampersand is not an “@” ;)

  • niente0

    Endoding? ;-)

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.