我想在 DIV 中显示 XML 数据。我的xml代码如下：
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>
我希望它在 div 中完全显示，所有行间距和 xml 标签都完全一样。
这可能吗？
【问题讨论】：
所以我猜你的问题是你试图将 XML 代码放入 DIV，而浏览器试图将 XML 标记解释为 HTML 标记？您可以通过将 XML 代码中的所有“”替换为 HTML 特殊字符 > 来防止这种情况发生。和<。
【讨论】：
在<和>旁边还需要替换双引号和&号。
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
这样就可以了。
【讨论】：
根据您需要的跨浏览器程度，使用<xmp> 标记或<pre><code> 标记以及在引号之间表示您的XML 的字符串可能就足够了：
<div>
<xmp>
<Status>
<Code>0</Code>
<Text>Success</Text>
</Status>
</xmp>
</div>
<div>
<pre><code>
"<Status>
<Code>0</Code>
<Text>Success</Text>
</Status>"
</pre></code>
</div>
【讨论】：
我想出了一种方法来在视觉上保持 xml 原始格式，以便在显示 xml 标记时保持白色间距和换行符。这应该会增强此处给出的答案。我使用 Tim Dev 的方法将 xml 标签的字符串替换为 html 文本可见元素。然后我在 Vadim Kiryukhin 找到的一门课叫做 vkBeautify 预处理后的 xml 会出现在目标文本区域中。
function addXMLToTextArea(xml) {
var replaceArgs = htmlEntities(xml);
document.getElementById('viewXML').value=vkbeautify.xml(xml, 4);
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
【讨论】：
如果您将您的 HTML 序列化为 XHTML 并使用 application/xhtml+xml 的 Content-Type 提供它（然后您应该这样做），解决方案将是双重的：
首先，您可以创建一个 CDATA 转义部分，它告诉任何 XML 或 HTML 解析器，它们不会在 HTML5 模式下解析（这就是为什么序列化为 XHTML 并用作 application/xhtml+xml 很重要的原因)，完全忽略 <![CDATA[ 和 ]]> 之间的内容（实际上根本不解析它，只是传递它）：
<![CDATA[ cr<'az>y text you w</>ant to display verbatim. ]]>
所有这些都是为了让你使用那些特殊字符，否则它们会被认为是标记。它只是让文本“落空”。
其次，您需要将此CDATA 部分 放在<pre></pre> 元素中。这将负责保持 XML 的格式不变（您可能还想添加一个 <code></code> 元素，这可能会根据您的用例使您的代码在语义上更合理）。如果您忽略它，那么您想要显示的文本将以<span> 元素的样式显示，即作为纯内联文本，符合流程。这就是为什么一个简单的div 是不够的。
以下是我刚刚测试成功的sn-p。请注意，我已经留下了缩进，就像在我的源代码中一样，以强调获取内容很重要，您将其包含在 pre 元素中，脱离缩进并按照您在此处看到的方式放置, 否则文本前的所有空格将保留在每行的左侧，因为结果将是逐字显示的内容：
<div>
<pre><![CDATA[
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>]]>
</pre>
</div>
一个完全不同的选择是实体转义所有定义标记的字符。最重要的是 &lt; 和 &gt; 需要分别表示为 &lt; 和 &gt;。有独立的工具可以做到这一点，但也有一些文本编辑器插件可以做到这一点。然而，这需要额外的处理步骤并且会使事情复杂化。但是你仍然需要<pre> 包裹你的文本。对某些人来说，积极的一面可能是他们不需要序列化为 XHTML。
【讨论】：
把原为replaced "<" and ">"的XML内容放到pre标签里面来显示漂亮：
<pre lang="xml">+xml_content+</pre>
【讨论】：