4

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

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

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

这可能吗？

4

6 回答 6

5

所以我猜你的问题是你试图将 XML 代码放入 DIV，而浏览器试图将 XML 标记解释为 HTML 标记？您可以通过将 XML 代码中的所有“<”和“>”替换为 HTML 特殊字符 > 来防止这种情况发生。和<。

于 2012-05-08T12:11:10.720 回答
3

在 and 旁边<，>您还需要替换双引号和 & 号。

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

这会成功的。

于 2013-07-17T11:21:40.103 回答
2

根据您需要的跨浏览器程度，使用一个<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>
于 2017-05-03T17:09:51.500 回答
0

我想出了一种方法来直观地保持 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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }
于 2014-04-26T14:27:06.220 回答
0

如果您将您的 HTML 序列化为 XHTML 并使用Content-Type（application/xhtml+xml然后您应该这样做）提供它，那么解决方案将有两个方面：

首先，您可以创建一个CDATA 转义部分，它告诉任何不在 HTML5 模式下解析的 XML 或 HTML 解析器（这就是为什么序列化为 XHTML 并作为 服务很重要的原因application/xhtml+xml），以完全忽略中间的内容<![CDATA[（]]>实际上不是完全解析它，只是通过它）：

<![CDATA[ cr<'az>y text you w</>ant to display verbatim. ]]>

所有这些都是为了让你使用那些特殊字符，否则它们会被认为是标记。它只是让文本“落空”。

其次，您需要将此CDATA 部分放在一个<pre></pre>元素中。这将负责保持 XML 的格式不变（您可能还想添加一个<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>

一个完全不同的选择是实体转义所有定义标记的字符。最重要的是，这些是<并且>需要分别表示为&lt;和&gt;。有独立的工具可以做到这一点，但也有一些文本编辑器插件可以做到这一点。然而，这需要额外的处理步骤并且会使事情复杂化。但是您仍然需要<pre>文本周围的包装器。对某些人来说，积极的方面可能是他们不需要序列化为 XHTML。

于 2020-02-13T13:34:11.723 回答
0

将 XML 内容替换为“<”和“>”到 pre 标记内以显示美观：

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

于 2021-01-06T04:30:11.307 回答