jQuery and urlencode / decode

Using jQuery and ajax can be tricky if you need to get urls with parameter in them.  You need to be smart when you pass a url so make sure to encode the url.

update: August 2010

Don’t use the plugin below. It is much better to use the native javascript functions: encodeURI or decodeURI.

var uri="your url.php?name=ståle&car=saab";
document.write(encodeURI(uri)+ "
");

which outputs:

your%20url.php?name=st%C3%A5le&car=saab

For more information on this please visit:
W3schools
Comparing escape(), encodeURI(), and encodeURIComponent()

Luckily there is a function / jQuery plugin to encode url’s and decode them if you like. Download the urlencoder plugin and then use it as shown below.

1st step encode your url:

	$("#con").html(
		$.URLEncode("This is only a test");
	);

2nd step decode your url

	$("#un").html(
		$.URLDecode("This%20is%20only%20a%20test");
	);

Pretty simple. It will save you a lot of headaches, if you are doing any json or ajax.

Tags: , ,
  • jonson

    Hi, I think URLDecode should handle “+” char as well used to encode space char if %20 isn’t used.
    I’ve patched URLDecode function:

    function dummy_url_decode(url) {
    // fixed -- + char decodes to space char
    var o = url;
    var binVal, t, b;
    var r = /(%[^%]{2}|\+)/;
    while ((m = r.exec(o)) != null && m.length > 1 && m[1] != '') {
        if (m[1] == '+') {
            t = ' ';
        } else {
            b = parseInt(m[1].substr(1), 16);
            t = String.fromCharCode(b);
        }
        o = o.replace(m[1], t);
    }
    return o;
}

    Well-loved. Like or Dislike: Thumb up 13 Thumb down 0

  • Henry

    Hi,

    Why would you use this plugin when javascript has a encodeURI/decodeURI and encodeURIComponent/decodeURIComponent?

    I would just like to know the motive, because I’m investigating the possibilities for urlencode.

    Thanks

    Like or Dislike: Thumb up 1 Thumb down 0

  • admin

    @Henry Using the JavaScript native encodeURI/decodeURI would be fine. At the time of this post I did not know it existed. I found this to be a simple easy way to get the results I was looking for.

    Like or Dislike: Thumb up 0 Thumb down 0

  • TE

    yeah, i dunno if this is a bug or what, but if I go to this page:

    http://meyerweb.com/eric/tools/dencoder/

    and decode this string

    %3Cdiv%20style%3D%22width%3A%20100%25%3B%22%3E%3C%2Fdiv%3E

    I get

    <div style=”width: 100%;”></div>

    But if I decode that same string using your decoder, i get this:

    <div style=”width: 100></div>

    Something seems messed up with the % or something…sorry, but I don't have the time to fix it. I've reverted to using the plain old javascript functions encodeURIComponent decodeURIComponent.

    Like or Dislike: Thumb up 1 Thumb down 0

  • TE

    Please don't use this plugin. People should simply use the standard javascript methods: encodeURI/decodeURI and/or encodeURIComponent/decodeURIComponent (as mentioned by Henry much earlier).

    Yeah, I'm sorry to say this, but this plugin is really quite badly broken.

    I don't mean to be rude, but it would be considerably more responsible to the jquery community for you to mention here on your page that this plugin doesn't work and shouldn't be used.

    My reasoning: problems with encoding/decoding are incredibly hard to narrow down. Who's the culprit? For instance, is it the Javascript? Is it AJAX? Is it the server-side language? Is it some kind of character-set encoding mismatch between the server, the database and/or the HTML? The list goes on. It took me several painstaking hours to discover that this plugin was the culprit.

    I think I should mention that this is the first third-party jquery plugin I've tried that is critically broken.

    Out of respect for the jquery community you should really pull the plug on this plugin – not only is it redundant, it is misleading, un-educational and potentially damaging depending on your usage.

    I've tried really hard here to be constructive without being rude – I hope I have been! Been constructive that is ;)

    Like or Dislike: Thumb up 1 Thumb down 0