decodeURI 不适用于 innerHTML 文本

Question

我一直在尝试解码文本，所以我可以采用 unescape JSON 编码。但是当变量值为 innerHTML 时我无法开始工作，但是当我将相同的字符串值硬编码到变量时它可以工作。

innerHTML 示例（我需要帮助）

<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>

预期结果：解码后的 URI：C:\Users\User\Documents\Fax

具有硬编码值的工作示例

    <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>

实际结果：解码后的 URI：C:\Users\User\Documents\Fax

我做错了什么？

Answer 1

行：

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

实际上将 uri 设置为 C:\Users\User\Documents\Fax。由于您只是创建一个反斜杠转义的字符串。

行：

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

将 uri 设置为 C:\Users\User\Documents\Fax，每个位置有两个反斜杠。

如果您希望字符串解决方案的行为相同，则需要在创建字符串时再次转义反斜杠。（即 var uri = "C:\\Users\\User\\Documents\\Fax";）

要修复您的第一个版本，使其像当前第二个版本一样工作，您可以使用 RegEx 替换将 C:\Users\User\Documents\Fax 更改为 C:\Users\User\Documents\Fax（或者如果可能，只需更改 html 元素包含 C:\Users\User\Documents\Fax).

正则表达式解决方案：

<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>

解析所有转义字符(\, \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>

Answer 2

使用编码的URI进行解码，否则我们看不出区别。

<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 不适用于 innerHTML 文本

decodeURI not working with innerHTML text

html

javascript

json

decode

decodeuricomponent