JavaScript urldecode
Decodes URL-encoded string
1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 18 19 2021 22 23 24 2526 27 28 29 30 | function urldecode (str) { // Decodes URL-encoded string // // version: 1001.2911 // discuss at: http://phpjs.org/functions/urldecode // + original by: Philip Peterson // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + input by: AJ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + improved by: Brett Zamir (http://brett-zamir.me) // + input by: travc // + input by: Brett Zamir (http://brett-zamir.me) // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + improved by: Lars Fischer // + input by: Ratheous // + improved by: Orlando // + reimplemented by: Brett Zamir (http://brett-zamir.me) // + bugfixed by: Rob // % note 1: info on what encoding functions to use from: http://xkr.us/articles/javascript/encode-compare/ // % note 2: Please be aware that this function expects to decode from UTF-8 encoded strings, as found on // % note 2: pages served as UTF-8 // * example 1: urldecode('Kevin+van+Zonneveld%21'); // * returns 1: 'Kevin van Zonneveld!' // * example 2: urldecode('http%3A%2F%2Fkevin.vanzonneveld.net%2F'); // * returns 2: 'http://kevin.vanzonneveld.net/' // * example 3: urldecode('http%3A%2F%2Fwww.google.nl%2Fsearch%3Fq%3Dphp.js%26ie%3Dutf-8%26oe%3Dutf-8%26aq%3Dt%26rls%3Dcom.ubuntu%3Aen-US%3Aunofficial%26client%3Dfirefox-a'); // * returns 3: 'http://www.google.nl/search?q=php.js&ie=utf-8&oe=utf-8&aq=t&rls=com.ubuntu:en-US:unofficial&client=firefox-a' return decodeURIComponent(str.replace(/\+/g, '%20')); } |
Examples
» Example 1
Running
1 | urldecode('Kevin+van+Zonneveld%21'); |
Should return
1 | 'Kevin van Zonneveld!' |
» Example 2
Running
1 | urldecode('http%3A%2F%2Fkevin.vanzonneveld.net%2F'); |
Should return
1 | 'http://kevin.vanzonneveld.net/' |
Dependencies
No dependencies, you can use this function standalone.
Open syntax issues
php.js uses JsLint to help us keep our code consistent and prevent some common bugs.
Eventually we want all code to pass or at least take into consideration most fixes suggested by JsLint, following this JsLint configuration we’ve decided on.
Authors
Thanks to the following developers, you get to have urldecode goodness in JavaScript.
The current version works pretty well, but need of one patch to "space bug":
1 2 3 4 | // Current return decodeURIComponent(str).replace(/\+/g, '%20'); // Correct return decodeURIComponent(str.replace(/\+/g, '%20')); |
Bye.
I think:
1 | return decodeURIComponent(str).replace(/\+/g, '%20'); |
should be:
1 | return decodeURIComponent(str.replace(/\+/g, '%20')); |
@ajo: Yes, 100% free as in free donuts (I don't drink alcohol)... :) You only need to add a copy of the license at http://phpjs.org/pages/license with any code you redistribute for others.
@ Shamun Toha: If I'm not mistaken Brett is working on a different method so that we don't have to work work with hash_maps anymore.
1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 18 19 2021 22 23 24 2526 27 28 29 3031 32 33 34 3536 37 38 39 4041 42 43 44 4546 47 48 49 5051 52 53 54 5556 57 58 59 6061 62 63 64 6566 67 68 69 7071 72 73 74 7576 77 78 79 8081 82 83 84 8586 87 88 89 9091 92 93 94 9596 97 98 99 100101 | function urldecode( str ) { // Decodes URL-encoded string // // version: 907.503 // discuss at: http://phpjs.org/functions/urldecode // + original by: Philip Peterson // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + input by: AJ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + improved by: Brett Zamir (http://brett-zamir.me) // + input by: travc // + input by: Brett Zamir (http://brett-zamir.me) // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + improved by: Lars Fischer // + input by: Ratheous // + improved by: @Shamun Toha // + note by: - Shamun: decodeURIComponent failed on many characters // % note 1: info on what encoding functions to use from: http://xkr.us/articles/javascript/encode-compare/ // * example 1: urldecode('Kevin+van+Zonneveld%21'); // * returns 1: 'Kevin van Zonneveld!' // * example 2: urldecode('http%3A%2F%2Fkevin.vanzonneveld.net%2F'); // * returns 2: 'http://kevin.vanzonneveld.net/' // * example 3: urldecode('http%3A%2F%2Fwww.google.nl%2Fsearch%3Fq%3Dphp.js%26ie%3Dutf-8%26oe%3Dutf-8%26aq%3Dt%26rls%3Dcom.ubuntu%3Aen-US%3Aunofficial%26client%3Dfirefox-a'); // * returns 3: 'http://www.google.nl/search?q=php.js&ie=utf-8&oe=utf-8&aq=t&rls=com.ubuntu:en-US:unofficial&client=firefox-a' // * example 4: urldecode("%3Ctr%3E%3Ctd%3Einfo%40jquery.com%20space%20%E9%3C%2Ftd%3E%3C%2Ftr%3E"); // * returns 4: <tr><td>info@jquery.com Space e</td></tr> var hash_map = {}, ret = str.toString(), unicodeStr='', hexEscStr=''; var replacer = function(search, replace, str) { var tmp_arr = []; tmp_arr = str.split(search); return tmp_arr.join(replace); }; // The hash_map is identical to the one in urlencode. hash_map["'"] = '%27'; hash_map['('] = '%28'; hash_map[')'] = '%29'; hash_map['*'] = '%2A'; hash_map['~'] = '%7E'; hash_map['!'] = '%21'; hash_map['%20'] = '+'; hash_map['\u00DC'] = '%DC'; hash_map['\u00FC'] = '%FC'; hash_map['\u00C4'] = '%D4'; hash_map['\u00E4'] = '%E4'; hash_map['\u00D6'] = '%D6'; hash_map['\u00F6'] = '%F6'; hash_map['\u00DF'] = '%DF'; hash_map['\u20AC'] = '%80'; hash_map['\u0081'] = '%81'; hash_map['\u201A'] = '%82'; hash_map['\u0192'] = '%83'; hash_map['\u201E'] = '%84'; hash_map['\u2026'] = '%85'; hash_map['\u2020'] = '%86'; hash_map['\u2021'] = '%87'; hash_map['\u02C6'] = '%88'; hash_map['\u2030'] = '%89'; hash_map['\u0160'] = '%8A'; hash_map['\u2039'] = '%8B'; hash_map['\u0152'] = '%8C'; hash_map['\u008D'] = '%8D'; hash_map['\u017D'] = '%8E'; hash_map['\u008F'] = '%8F'; hash_map['\u0090'] = '%90'; hash_map['\u2018'] = '%91'; hash_map['\u2019'] = '%92'; hash_map['\u201C'] = '%93'; hash_map['\u201D'] = '%94'; hash_map['\u2022'] = '%95'; hash_map['\u2013'] = '%96'; hash_map['\u2014'] = '%97'; hash_map['\u02DC'] = '%98'; hash_map['\u2122'] = '%99'; hash_map['\u0161'] = '%9A'; hash_map['\u203A'] = '%9B'; hash_map['\u0153'] = '%9C'; hash_map['\u009D'] = '%9D'; hash_map['\u017E'] = '%9E'; hash_map['\u0178'] = '%9F'; // on decodeURIComponent failure. hash_map['<'] = '%3C'; hash_map['>'] = '%3E'; hash_map['/'] = '%2F'; hash_map['@'] = '%40'; hash_map['e'] = '%E9'; hash_map[' '] = '%20'; for (unicodeStr in hash_map) { hexEscStr = hash_map[unicodeStr]; // Switch order when decoding ret = replacer(hexEscStr, unicodeStr, ret); // Custom replace. No regexing } // End with decodeURIComponent, which most resembles PHP's encoding functions ret = decodeURIComponent(ret); return ret;} |
Test suite:
1 2 3 | // output this: <tr><td>info@jquery.com Space e</td></tr> var a = "%3Ctr%3E%3Ctd%3Einfo%40jquery.com%20space%20%E9%3C%2Ftd%3E%3C%2Ftr%3E"; alert ( urldecode(a) ); |
@CDuv: The escape sequence, "%E7a%20plante" gives an invalid character in PHP as well. Are you using UTF-8 like a good netizen? :) The urlencode() (in PHP or JavaScript) used on "ça plante" should be giving: "%C3%A7a+plante" which can then be decoded by either as well. This function needs to drop some of the code that was mistakenly added for the sake of ISO Latin--which is not used in PHP or JS, from my testing.
I had a "malformed URI sequence" JavaScript error in Firefox/3.5.2 (Gecko/20090729) error console when trying to url-decode : "%E7a%20plante" ("ça plante").
I read on OpenLayers bugtracker Ticket #1704 (http://trac.openlayers.org/ticket/1704) that JavaScript unescape() function could help.
So I gave it a chance and changed
1 | ret = decodeURIComponent(ret); |
To
1 | ret = decodeURIComponent(unescape(ret)); |
As it solved by problem I would like to share it with you :)
@ Brett Zamir: Agreed. until we do though, I'd like to add Orlando's improvements to the hash_map
@ Orlando: Thanks for sharing, fixed in SVN
@Orlando, thanks for pointing this out. However, if someone has some time now, could we look into solving this problem (that keeps coming up) of seeing non-ASCII characters translated correctly for all languages? There must be some algorithm we can use rather than just pasting new translations piecemeal...
I was working with norwegian characters but wasn't able to get it working for uppercase characters(Ø,Å,Æ) until I added the following lines to hashmap:
1 2 3 | hash_map['\u00C6'] = '%C3%86'; hash_map['\u00D8'] = '%C3%98'; hash_map['\u00C5'] = '%C3%85'; |
I got those values when encoding at php with urlencode().
This is a wonderful Project! I'm glad, finding it today! Really good work!
For the german special-chars, this should be added to the urlencode and urldecode-function:
1
2
3
4
56
| histogram['\u00DC'] = '%DC'; histogram['\u00FC'] = '%FC'; histogram['\u00C4'] = '%D4'; histogram['\u00E4'] = '%E4'; histogram['\u00D6'] = '%D6';histogram['\u00F6'] = '%F6'; |
histogram['\u00DF'] = '%DF';
Hi there...Getting tired of me yet?
The following should be added to this function and for urlencode():
1
2
3
4
5 | histogram["'"] = '%27'; histogram['('] = '%28'; histogram[')'] = '%29'; histogram['*'] = '%2A'; histogram['~'] = '%7E'; |
And once you fix the above, you can also get rawurlencode and rawurldecode by simply removing the following line from each of the corresponding files:
1 | histogram['%20'] = '+'; |
(That's the only difference with the raw form)
@ Guilherme: Sorry your comment got stuck in the spamfilter. Akismet is a bit strict sometimes (can't really blame it, there are a lot of unrecognized words in your comment). Anyway:
You are not supposed to use php tags. This should prove to be more successful:
1 2 | var $__t = '\'a\' +b+ \"c\" %d% \\\\ \\\\'; alert(urlencode($__t)); |
Hi, I guess your function doesn't work for some situations. Try this code (I'll appreciate if you send me the fixes):
1
2
3
4
56
7
| <?php $__t = '\'a\' +b+ \"c\" %d% \\\\ \\\\'; ?> alert("<?= $__t ?>"); alert("<?= urlencode($__t) ?>");alert("<?= urldecode(urlencode($__t)) ?>"); alert(urldecode("<?= urlencode($__t) ?>")); // It fails with your function! |
@ johnrembo: Hi John, thanks for your input again. We had some discussion about it earlier. It doesn't mimic PHP behavior enough. Differences between JavaScript's encoding functionalities can be found here: http://xkr.us/articles/javascript/encode-compare/
@ doqkhanh: Why do we really need this handling? Because I don't believe PHP would return such an error string, and we would like to mimic it's behavior as strict as possible, to avoid strange bugs & unexpected results; and so that the PHP documentation doesn't need to be changed.
I have a safer function:
/**
* \summary: http://kevin.vanzonneveld.net
* \author: Original by: Philip Peterson
* improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
* \example: urlencode('Kevin van Zonneveld!');
* \returns: 'Kevin+van+Zonneveld%21'
*/
function urlencode( str ) {
var errorMessage = "Javascript error at urlencode() function in yourfile.js. Please contact YourCompany's site administrator.";
var ret = str;
try
{
ret = ret.toString();
ret = encodeURIComponent(ret);
ret = ret.replace(/%20/g, '+');
}
catch(err)
{
alert(errorMessage);
}
return ret;
}


Brett Zamir
Jan 8th