[RESOLVED] urlencode in JavaScript?

[mikesch]

Hi,

I have a php page where I output a list of titles and give the option to delete them. When the user clicks on delete, I call the following JavaScript function:

function deleteitem(title) {
if (confirm("Are you sure you want to delete '" + title +"'"))
{
window.location.href = 'outputadmin.php?del=' + title;
}
}

If the user confirms, then the title is deleted from the database. Everything works as long as I don't have a title that contains the '&' (ampersand) character. For example, if I have the following title: 'John & Mary', then after the user confirms his wish to delete, the following url will be sent: outputadmin.php?del=John&Mary

The problem is that when I access $GET I will get $GET=John and that's not the title in the database. I know 'Mary' is treated as separate variable just like 'del'.

Is there a way around this in JavaScript to urlencode the whole title? In other words, to skip the '&'?

Thank you very much.

Best,

Mike

[mikesch]

Found the answer. FYI: In Javascript, the function escape() does the same as urlencode() in PHP.

[Ichiro]

Actually Javascript's escape() and unescape() are not the same as PHP's urlencode() and urldecode(). In fact, there is one particular occasion when assuming they are the same can cause serious trouble.

You can see a table of the results of the two different methods at http://cass-hacks.com/articles/discussion/js_url_encode_decode/

I know this was posted a long time ago but I just got here. 😃

[stijnm]

Just got here too.

How about this:

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}

[nubs]

stijnm;10830534 wrote:

Just got here too.

How about this:

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}

This is shorter:

function urlencode(str) {
return escape(str).replace('+', '%2B').replace('%20', '+').replace('*', '%2A').replace('/', '%2F').replace('@', '%40');
}

function urldecode(str) {
return unescape(str.replace('+', ' '));
}

[ottodv]

The solutions above only replaces the first occurrence of each pattern. It's better to use a global replace:

function urlencode(str) {
return escape(str).replace(/+/g,'%2B').replace(/%20/g, '+').replace(/*/g, '%2A').replace(/\//g, '%2F').replace(/@/g, '%40');
}

[ottodv]

In addition to my previous post I think it would be good to point out that there is also the encodeURIComponent() function in JavaScript that is probably suitable for the purposes intended in this thread. It doesn't escape: ! ~ * ' ( ) like the urlencode PHP function does, but I have experienced no problems passing a argument encoded by encodeURIComponent to a PHP script. Another plus is that encodeURIComponent encodes all UTF-8 characters while escape encodes ISO Latin characters.

[ProteusR3]

I've got another solution.
I've tested it and it works very well!
[FONT="Courier New"]function php_urlencode (str) {
str = escape(str);
return str.replace(/[+\/@]|%20/g,
function (s) {
switch (s) {
case "": s = "%2A"; break;
case "+": s = "%2B"; break;
case "/": s = "%2F"; break;
case "@": s = "%40"; break;
case "%20": s = "+"; break;
}
return s;
}
);
}[/FONT]

[shelby3]

ottodv;10892322 wrote:

In addition to my previous post I think it would be good to point out that there is also the encodeURIComponent() function in JavaScript that is probably suitable for the purposes intended in this thread. It doesn't escape: ! ~ * ' ( ) like the urlencode PHP function does, but I have experienced no problems passing a argument encoded by encodeURIComponent to a PHP script. Another plus is that encodeURIComponent encodes all UTF-8 characters while escape encodes ISO Latin characters.

Definitely beneficial to have the UTF-8 encoding, so that special characters (such as division symbol, foreign language characters, etc) copy+pasted into <input> and <textarea> are not lost:

http://www.dangrossman.info/2007/05/25/handling-utf-8-in-javascript-php-and-non-utf8-databases/

Here are the functions I am using:

   // https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent#Description
   urlEncode : function( s )
   {
      return encodeURIComponent( s ).replace( /\%20/g, '+' ).replace( /!/g, '%21' ).replace( /'/g, '%27' ).replace( /\(/g, '%28' ).replace( /\)/g, '%29' ).replace( /\*/g, '%2A' ).replace( /\~/g, '%7E' );
   },

   urlDecode : function( s )
   {
      return decodeURIComponent( s.replace( /\+/g, '%20' ).replace( /\%21/g, '!' ).replace( /\%27/g, "'" ).replace( /\%28/g, '(' ).replace( /\%29/g, ')' ).replace( /\%2A/g, '*' ).replace( /\%7E/g, '~' ) );
   },

[Weedpacket]

Just as an aside, I had a look at shelby3's functions, and I suspect that they could be simplified:

urlEncodeCharacter : function(c)
{
	return '%' + c.charCodeAt(0).toString(16);
};

urlDecodeCharacter : function(str, c)
{
	return String.fromCharCode(parseInt(c, 16));
};

urlEncode : function( s )
{
      return encodeURIComponent( s ).replace( /\%20/g, '+' ).replace( /[!'()*~]/g, urlEncodeCharacter );
};

urlDecode : function( s )
{
      return decodeURIComponent(s.replace( /\+/g, '%20' )).replace( /\%([0-9a-f]{2})/g, urlDecodeCharacter);
};

Well, I suppose it depends on what counts as "simplified"; obviously they could be written differently.... Shortening the chain of method calls and intermediate string objects is presumably an improvement, but it's at the expense of a couple more complicated regular expressions and callback functions.