HTML 不显示已解码的 %3C？

Question

以下代码块相似，但输入字符串不同，因此结果不同：

// This does not change HTML
var str = "%3Cdiv%3E"; // <div>
var str_dec = decodeURIComponent(str);
console.log(str_dec); // Console output is `<div>`
document.getElementById("p1").innerHTML = "1: " + str_dec; // No HTML output

// This works fine within HTML
var str = "%3C0%3E"; // <0>
var str_dec = decodeURIComponent(str);
console.log(str_dec); // Console output is `<0>`
document.getElementById("p2").innerHTML = "2: " + str_dec; // HTML output is `<0>`

<p id="p1"></p>
<p id="p2"></p>

尽管控制台显示解码在第一种情况下工作正常，但为什么它没有出现在 HTML 中？

Answer 1

Although, console shows that decoding works fine in first case, why it does not appear in the HTML?

一个 <div> 元素在 <p> 元素的结果 .innerHTML 中。

"<div>" 在结果 html.

中创建 <div></div>

Answer 2

这是因为 <0> 不是有效的 HTML 标签，因为 SGML（HTML 曾经派生自的语言）标签不能以数字开头：

The element name immediately follows the tag open delimiter. An element name consist of a letter followed by up to 72 letters, digits, periods, or hyphens. Names are not case sensitive.

https://www.w3.org/MarkUp/html3/HTMLandSGML.html

由于代码正在分配 Element 的 innerHTML 属性，浏览器会尝试将值解析为 HTML 而不会处理 <0> 作为 HTML 元素，而不是选择将其视为文本值；而 <div> 是一个有效的 HTML 元素，因此浏览器会这样对待它。

如果您检查控制台中的输出，您实际上会在段落 p1 中看到一个空的 <div> DOM 节点（以及字符串 <0> p2):

如果您不希望浏览器将分配的值解析为 HTML，请改用更安全、更简单的 textContent 属性。

HTML 不显示已解码的 %3C？

HTML does not show decoded %3C?

html

javascript

decodeuricomponent