Encoding/Decoding "&" in a URL parameter

Question

Here is a string which I'm encoding in JavaScript using encodeURI

This is the encoded String - Copyright%20%C2%A9%202003

I'm passing this text with a link like www://abc.com?param=Copyright%20%C2%A9%202003 which in turn opens a javascript popup window.

I understand IE does not display this special character © properly and for that we need to use "&copy". But somehow I can't send "&copy" as the parameter as it treats "&copy" as a new parameter itself as it starts with "&"

Could you please let me know how to properly encode/decode this text correctly across IE using javascript.

See here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — elclanrs
– elclanrs, Commented Feb 20, 2014 at 7:46
A person usually needs encodeURIComponent instead of encodeURI, e.g., & and = are ok in a URI, but will cause problems if you are concatenating a string with them in a component as they may be interpreted as new parameters. — Brett Zamir
– Brett Zamir, Commented Feb 20, 2014 at 7:56
I don't want to encode "www.abc.com" rather I want only to encode the parameter and that's why I 'm encoding this using encodeURI. — Ansuman
– Ansuman, Commented Feb 20, 2014 at 7:59
then you should use encodeURIComponent--that's the reason for it... — Brett Zamir
– Brett Zamir, Commented Feb 20, 2014 at 7:59

Reboot · Accepted Answer · 2014-02-20 10:41:33Z

Using HTML entities like © is only valid for escaping special characters inside HTML. It is not useful to send it as parameter of a URL.

The problem you have seems to be that the browser is using an UTF-8 encoding to store strings and the © character is stored as a 2 byte sequence with is encoded as %C2%A9 in the URL. The page that decodes the URL doesn't seem to use UTF-8 and decodes the 2 bytes as 2 separate characters Â©.

As long as you don't tell the browser which character set to use, it can choose whatever it thinks is the best option. Firefox and Chrome seem to prefer UTF-8 and encode and decode the string correctly. Internet Explorer 10 seems to choose a different character set in each of the pages.

You should make sure that all pages have a

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

tag in the HTML header. This will usually tell the browser which charset to use for strings and should fix the problem with encoding and decoding of non-ASCII characters in URLs.

Brett Zamir · Accepted Answer · 2014-02-20 08:28:31Z

Use encodeURIComponent on the parameter you send (and decodeURIComponent on the other end) along with the proper meta tag (below is the simpler yet still backward-compatible and HTML5-friendly way) and document encoding. This will escape things like & and = which can otherwise get treated like parameter separators.

Here's an IE10 and FF27-tested demo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
</head>
<body>

<script>

var testString = '\u00a9'; // Show the copyright symbol by default
              // though you can test with "&" and "=" in here as well
var loc = window.location.href;
if (loc.indexOf('param=') === -1) { // Add the param if not present
    window.location += '?param=' + encodeURIComponent(testString);
}

// Show the symbol after the param (in a safe manner).
document.body.appendChild(document.createTextNode(
    decodeURIComponent(loc.replace(/.*?\?param=/, ''))
));
</script>

</body>
</html>

Collectives™ on Stack Overflow

Encoding/Decoding "&" in a URL parameter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related