JavaScript URL Decode function

Question

What's the best JavaScript URL decode utility? Encoding would be nice too and working well with jQuery is an added bonus.

• Gumbo: Did you check encodeURIComponent and decodeURIComponent?
• at.: is that really the same thing?
• at.: @Gumbo: the same thing as URL encoding and URL decoding - blooberry.com/indexdot/html/topics/urlencoding.htm

Answer 1

Here is a complete function (taken from PHPJS):

function urldecode(str) {
 return decodeURIComponent((str+'').replace(/\+/g, '%20'));
}

• Máthé Endre-Botond: +1: this is the true urldecode, handles the case of space being encoded as +, thanks a lot
• Scott Keck-Warren: This is what I needed to use when the data was encoded with PHP's urlencode() function.
• Chris Moschini: If I'm not mistaken, this is decoding + as %20, not as space - that's not really what you wanted here, is it? You'd want the space, not another version of an encoded character... no?
• lfaraone: @ChrisMoschini: No, this is correct because the replace occurs before the decode call.
• Dante Cullari: Thank you so much!! This is a perfect way to handle strings in jquery which have been previously urlencoded with php, just what I needed!!

Answer 2

I've used encodeURIComponent() and decodeURIComponent() too.

• at.: thanks guys! looks like the right answer, but Gumbo answered this first.. I feel like he deserves the credit
• Steven Francolla: This is an incomplete answer. See the urlDecode() implementation below by @anshuman.
• MusikAnimal: Nice but it didn't remove '+' signs. @anshuman's answer worked best for me
• mjs: Doesn't work with spaces which are represented with ++++

Answer 3

Use this

unescape(str);

I'm not a great JS programmer, tried all, and this worked awesome!

• Brad Koch: Cool answer, but looks like it's obsoleted in favor of decodeURIComponent() due to poor support of non-ASCII characters.

Answer 4

decodeURIComponent(mystring);

you can get passed parameters by using this bit of code:

//parse URL to get values: var i = getUrlVars()["i"];
function getUrlVars() {
 var vars = [], hash;
 var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 for (var i = 0; i < hashes.length; i++) {
 hash = hashes[i].split('=');
 vars.push(hash[0]);
 vars[hash[0]] = hash[1];
 }
 return vars;
}

Or this one-liner to get the parameters:

location.search.split("your_parameter=")[1]

• aloisdg: You should use window.location.search instead.

Answer 5

//How decodeURIComponent Works
function proURIDecoder(val)
{
 val=val.replace(/\+/g, '%20');
 var str=val.split("%");
 var cval=str[0];
 for (var i=1;i<str.length;i++)
 {
 cval+=String.fromCharCode(parseInt(str[i].substring(0,2),16))+str[i].substring(2);
 }
 return cval;
}
document.write(proURIDecoder(window.location.href));

• Smile4ever: Thank you, this worked for me. decodeURIComponent did not work for me (Malformed URI sequence).

Answer 6

If you are responsible for encoding the data in PHP using urlencode, PHP's rawurlencode works with JavaScript's decodeURIComponent without needing to replace the + character.

Answer 7

Here's what I used:

In JavaScript:

var url = "http://www.mynewsfeed.com/articles/index.php?id=17";
var encoded_url = encodeURIComponent(url);
var decoded_url = decodeURIComponent(encoded_url);

In PHP:

$url = "http://www.mynewsfeed.com/articles/index.php?id=17";
$encoded_url = url_encode(url);
$decoded_url = url_decode($encoded_url);

You can also try it online here: http://www.mynewsfeed.x10.mx/articles/index.php?id=17

Answer 8

var uri = "my test.asp?name=ståle&car=saab";
console.log(encodeURI(uri));

Answer 9

decodeURIComponent() is fine, but you never want ot use encodeURIComponent() directly. This fails to escape reserved characters like *, !, ', (, and ). Check out RFC3986, where this is defined, for more info on that. The Mozilla Developer Network documentation gives both a good explanation and a solution. Explanation...

To be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:

Solution...

function fixedEncodeURIComponent(str) {
 return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
 return '%' + c.charCodeAt(0).toString(16);
 });
}

In case you're not sure, check out a good, working demo at JSBin.com. Compare this with a bad, working demo at JSBin.com using encodeURIComponent() directly.

Good code results:

thing%2athing%20thing%21

Bad code results from encodeURIComponent():

thing*thing%20thing!