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

这是因为<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

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

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

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