Problem with "decodeURIComponent"

Posted on Thu 1st, November 2018

• #1

iwae

Hi guys,

i have a problem with sending some data with an simple http form.

HTML Code:


> <html> 
> <head><meta charset="utf-8"/></head>   
> <body><h2>Konfiguration</h2> <form  action="#" method="post"> > <div class="container">
> <label for="test"><b>TEST</b></label><input type="text" placeholder="Enter text" name="test" required>
> </form>
> </body>
> </html>

JS on Espruino

  var data = "";
  req.on('data', function(d) { data += d; });
  req.on('end', function() {
    postData = {};
    console.log(data);
    data.split("&").forEach(function(el) {
      var els = el.split("=");
      postData[els[0]] = decodeURIComponent(els[1]);
    });

If I enter the following to the form: "PLUS++++LEER OK"
The browser send: "PLUS%2B%2B%2B%2BLEER+++++OK"

On espruino: test=PLUS%2B%2B%2B%2BLEER+++++OK
Now I call the "decodeURIComponent" but the result is
"PLUS++++LEER+++++OK"

I would expect the following: "PLUS++++LEER OK"
https://www.w3schools.com/tags/att_form_enctype.asp

You have the same behaviour? The blank issnt decoded correctly.

• #2

Gordon
Can you give me an example of just running decodeURIComponent where it's not doing what you expect?

With your example I get:
```
// Espruino
>decodeURIComponent("PLUS%2B%2B%2B%2BLEER+++++OK")
="PLUS++++LEER+++++OK"
// Chrome
>decodeURIComponent("PLUS%2B%2B%2B%2BLEER+++++OK")
="PLUS++++LEER+++++OK"
// Node.js
> decodeURIComponent("PLUS%2B%2B%2B%2BLEER+++++OK")
='PLUS++++LEER+++++OK'
```
So I'd say it's behaving as expected.

However it's not desperately helpful for what you're trying to do. You could try decodeURIComponent(els[1].replace(/+/g," "));

Looking online it seems that is the accepted way of doing it: https://stackoverflow.com/a/24417399/1215872
• #3

allObjects
Your html has an issue: the div inside the form is not closed... because I wondered why the browser would send so much additional stuff as you point out...
```
`
<html>
<head><meta charset="utf-8"/></head>
<body><h2>Konfiguration M</h2>
  <form action="/action_page.php" method="post">
    <div class="container">
      <label for="test"><b>TEST</b></label>
      <input name="test" type="text" placeholder="Enter text" required>
     <input type="submit" value="Submit">
    </div>
</form>
</body>
</html>
`
```
For testing, I created this html (including the submit - which is not really needed), and served it from local 127.0.0.1 and posted it back there (to a not defined page - which does not matter, though, because - so far - I'm only interested in verifying/debugging the request...). What my browser - Chrome - tells me in the debugger/inspector, is attached as screenshots - encoded and parsed... and I see different (my testfield input is X+++B OK).

...and btw, even with the messed up form and submit absent, I see the same posted by the browser, as the 3rd screenshot shows. I'm interested in your screenshots...

3 Attachments
• #4

iwae in reply to @Gordon
However it's not desperately helpful for what you're trying to do. You could try decodeURIComponent(els[1].replace(/+/g," "));

That is exactly what I do to fix it but I thought that decodeURIComponent should already result the same.
It seems that it is my fault. Why are spaces something so special?

application/x-www-form-urlencoded Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values)
https://www.w3schools.com/tags/att_form_enctype.asp

I expected that a space would be
```
 U+0020		&#32;	Space
```
not just an "+".

Confusing for me :)

Thank you for your help!

PS: Espruino is very cool :)
• #5

allObjects

+ is considered a special character and converting spaces to + after encoding is just fine... and was to make sure there is a continuous stream of non-blank chars (no blanks) in the body... may be because the encoding happened in a U/Linux command line / argument context... (to make the body a single argument).
• #6

Robin in reply to @iwae

ref#4 Why are spaces something so special? not just an "+" Confusing for me

Thr 2018.11.01

From Monty Python's the Holy Grail

Consult the Book of Armaments !

The spec says it all . . . .

https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1
• #7

Gordon

I thought that decodeURIComponent should already result the same.

You'd think so wouldn't you? It's one of those cases where I'd love to make decodeURIComponent do the 'right' thing, but if I did then someone would complain it wasn't spec compliant!
• #8

iwae in reply to @Gordon

It's already great :) I saw that the spec defines that behaviour. So we can't do something different :)

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

Problem with "decodeURIComponent"

About

Problem with "decodeURIComponent"

Actions

Problem with "decodeURIComponent"

Formatting Help

About

Problem with "decodeURIComponent"

Actions

Espruino