decodeURI not working with innerHTML text

Question

I've been trying decode text, so I can take unescape JSON encoding. But I can't get to work when the variable value is innerHTML but it works when I hardcode the same string value to the variable.

innerHTML Example (I need help with)

<html>
<body>

<p id="uri">C:\\Users\\User\\Documents\\Fax</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var uri = document.getElementById("uri").innerText;
  var dec = decodeURI(uri.toString());
  var res = "Decoded URI: " + dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

Expected Result: Decoded URI: C:\Users\User\Documents\Fax

Working example with a hardcoded value

    <html>
    <body>

    <p id="uri">Decode</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
      var uri = "C:\\Users\\User\\Documents\\Fax";
      var dec = decodeURI(uri.toString());
      var res = "Decoded URI: " + dec;
      document.getElementById("demo").innerHTML = res;
    }
    </script>

    </body>
    </html>

Actual Result: Decoded URI: C:\Users\User\Documents\Fax

What am I doing wrong?

That text is not URI-encoded. In fact it's not really a URI at all; it's a Windows file path. — Pointy, May 12 '20 at 17:56
This was a simplified example but in my actual application "\" is converted to "\\" and each enter is converted to \r on when submitting. — DN0300, May 12 '20 at 17:58
Why is JSON being talked about here? I don't see any JSON being used here. — Heretic Monkey, May 12 '20 at 18:58

DenverCoder1 · Accepted Answer · 2020-05-12T19:01:29.743

The line:

var uri = "C:\\Users\\User\\Documents\\Fax";

actually sets uri to C:\Users\User\Documents\Fax. Since you are simply creating a string with the backslashes escaped.

The line:

var uri = document.getElementById("uri").innerText;

sets uri to C:\\Users\\User\\Documents\\Fax with two backslashes in each position.

If you want the string solution to behave the same, you need to escape the backslashes again when creating the string. (i.e. var uri = "C:\\\\Users\\\\User\\\\Documents\\\\Fax";)

To fix your first version to work as the second currently does, you can use a RegEx replacement to change C:\\Users\\User\\Documents\\Fax to C:\Users\User\Documents\Fax (or if it is possible, simply change the html element to contain C:\Users\User\Documents\Fax).

RegEx solution:

<html>
<body>

<p id="uri">C:\\Users\\User\\Documents\\Fax</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var uri = document.getElementById("uri").innerText.replace(/\\\\/g,"\\");
  console.log("uri = " + uri);
  var dec = decodeURI(uri.toString());
  var res = "Decoded URI: " + dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

To parse all escaped characters (\\, \n, \r, \t, ...):

<html>
<body>

<p id="uri">C:\\Users\\User\\Documents\\Fax</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var uri = document.getElementById("uri").innerText;
  console.log("uri = " + uri);

  uri = JSON.parse(`"${uri}"`);
  console.log("parsed uri = " + uri);

  var dec = decodeURI(uri.toString());
  var res = "Decoded URI: " + dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>

I see what you are doing with replace although that works for "\\" usecase, decodeURI still ignores decoding \n, \r other JSON Espace characters that it adds to my strings. — DN0300, May 12 '20 at 18:18
@DN0300 It seems like you just want to remove all backslash escaping from the variable. In that case, `JSON.parse` should be all you need. This should work: `JSON.parse(\`"${document.getElementById("uri").innerText}"\`);` (or see full example added at end of my answer). — DenverCoder1, May 12 '20 at 18:50
@DN0300 Like lakshitha said, `decodeURI` is for hex encoded strings like `"%5C%20%C3"` and not backslash escaped strings, so it doesn't do anything to your string. — DenverCoder1, May 12 '20 at 18:58
Is there something similar to json.Parse I can use for innerHtml? — DN0300, May 13 '20 at 12:46

score 0 · Answer 2 · answered May 12 '20 at 18:03

Use encoded URI to decode, if not we couldn't see the difference.

<p id="uri">my%20test.asp?name=st%C3%A5le&car=saab</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function myFunction() {
        var uri = document.getElementById("uri").innerText;
        var dec = decodeURI(uri.toString());
        var res = "Decoded URI: " + dec;
        document.getElementById("demo").innerHTML = res;
    }
</script>

decodeURI not working with innerHTML text

2 Answers2