Question

我想在DIV中显示XML数据。我的xml代码如下：

<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don’t forget me this weekend!</body>
</note>

我希望它在div中完全显示，所有行间距和xml标签完全一样。

这可能吗？

Answer 1

所以我猜你的问题是你试图将XML代码放入DIV，浏览器试图将XML标签解释为HTML标签？您可以通过替换所有“＆lt;”来防止这种情况和“＆gt;”在HTML代码中使用HTML特殊字符＆amp; gt;和＆amp; lt。

Answer 2

<和>旁边您还需要替换双引号和＆符号。

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

这样就可以了。

Answer 3

我找到了一种方法来保持xml原始格式在视觉上保持白色间距＆amp;显示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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }

Answer 4

根据您需要的跨浏览器的方式，使用<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>

Answer 5

如果您将HTML序列化为XHTML并使用application/xhtml+xml的 Content-Type （然后您应该这样做），则解决方案将是双重的：

首先，您可以创建一个 CDATA转义部分，该部分告诉所有XML或HTML解析器，它们不会以HTML5模式进行解析（这就是为什么将序列化为XHTML并用作{{1 }}），以完全忽略application/xhtml+xml和<![CDATA[之间的内容（实际上完全不解析它，而只是通过它）：

]]>

所有这些操作是为了让您使用那些特殊字符，否则这些特殊字符将被视为标记。它只是让文本“掉线”。

第二，您需要将此 CDATA部分放在<![CDATA[ cr<'az>y text you w</>ant to display verbatim. ]]>元素内。这将有助于保持XML的格式不变（您可能还想添加一个<pre></pre>元素，根据您的用例，它可能会使代码在语义上更加合理）。如果您不进行此操作，则要显示的文本将以<code></code>元素的样式显示，即作为纯内嵌文本遵循流程。这就是为什么仅使用简单的<span>不够的原因。

以下是我刚刚成功测试过的代码段。请注意，正如我在源代码中一样，我已经保留了缩进，以强调，将内容包含在div元素中，从缩进中取出并按照您所看到的方式放置是很重要的此处，否则文本之前的所有空白将保留在每行的左侧，因为结果将是逐字记录的内容：

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>和<，它们分别需要表示为>和<。有独立的工具可以执行此操作，但是某些文本编辑器插件也可以执行此操作。但是，这需要额外的处理步骤，并且可能使事情复杂化。但是，您仍然需要在文本周围使用>包装器。对于某些人来说，积极的方面可能是，他们那时不需要序列化到XHTML。

Answer 6

将 XML 内容 replaced "<" and ">" 放在 pre 标签内以显示美观：

<pre lang="xml">+xml_content+</pre>

如何在DIV中显示XML数据

6 个答案: