decodeURI not working with innerHTML text

Question

decodeURI not working with innerHTML text

812 Views Asked by DN0300 At 18 April 2025 at 10:02

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?

Original Q&A

There are 2 best solutions below

lakshitha madushan On 12 May 2020 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>

**DenverCoder1** · Accepted Answer

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>

decodeURI not working with innerHTML text

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JSON

Related Questions in DECODE

Related Questions in DECODEURICOMPONENT

Trending Questions

Popular # Hahtags

Popular Questions