JS encodeURIComponent result different from the one created by FORM

Question

I thought values entered in forms are properly encoded by browsers.

But this simple test file \"test_get_vs_encodeuri.html\" shows it\'s not true:

&l         


        

Answer 1

This is a character encoding issue. Your document is using the charset Windows-1252 where the € is at position 128 that is encoded with Windows-1252 as 0x80. But encodeURICompenent is expecting the input to be UTF-8, thus using Unicode’s charset where the € is at position 8364 (PDF) that is encoded with UTF-8 0xE282AC.

A solution would be to use UTF-8 for your document as well. Or you write a mapping to convert UTF-8 encoded strings to Windows-1252.

Answer 2

I think the root of the problem is character encodings. If I mess around with charset in the meta tag and save the file with different encodings I can get the page to render in the browser like this:

_{(source: boogdesign.com)}

That € looks a lot like what you're getting from encodeURIComponent. However I could find no combination of encodings which made any difference to what encodeURIComponent was returning. I can make a difference to what the GET query returns. This is your original page, submitting gives an URL like:

test-get-vs-encodeuri.html?one=Euro-%80

This is a UTF-8 version of the page, submitting gives an URL that looks like this (in Firefox):

http://www.boogdesign.com/examples/encode/test-get-vs-encodeuri-utf8.html?one=Euro-€

But if I copy and paste it I get:

http://www.boogdesign.com/examples/encode/test-get-vs-encodeuri-utf8.html?one=Euro-%E2%82%AC

So it looks like if the page is UTF-8 then the GET and encodeURIComponent match.