如何在HTML表格的td中原样显示XML数据？

这问题我之前处理过好几次！浏览器默认会压缩文本里的换行、连续空格，而且XML里的<、>这些特殊字符会被当成HTML标签解析，自然就没法保留XML的原始格式了。下面给你几个实用的解决办法：

方法1：用<pre>标签包裹+转义特殊字符 #

这是最直接的方案，<pre>标签会强制保留文本的换行、空格和缩进，同时我们需要把XML里的特殊字符转义成HTML实体：

• < → <
• > → >
• & → &

修改后的代码示例：

<html>
<table> 
  <tr> 
    <td>Heading 1</td> 
    <td>Heading 2</td> 
    <td>Heading 3</td> 
  </tr> 
  <tr>
    <td>value 1</td> 
    <td>value 2</td> 
    <td>
      <pre>
&lt;?xml version="1.0" encoding="utf-16"?&gt;
&lt;ArrayOfMENU_BO xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"&gt;
  &lt;MENU_BO&gt;
    &lt;ID&gt;2&lt;/ID&gt;
    &lt;CreatedBy&gt;0&lt;/CreatedBy&gt;
    &lt;CreatedOn&gt;0001-01-01T00:00:00&lt;/CreatedOn&gt;
    &lt;ModifiedBy&gt;0&lt;/ModifiedBy&gt;
  &lt;/MENU_BO&gt;
&lt;/ArrayOfMENU_BO&gt;
      </pre>
    </td>
  </tr> 
</table>
</html>

方法2：CSS样式控制+字符转义 #

如果你不想用<pre>标签，也可以给目标<td>添加CSS样式来保留格式，同样需要转义特殊字符：

<html>
<style>
  .xml-display {
    white-space: pre-wrap; /* 保留换行，超出宽度自动换行 */
    font-family: monospace; /* 用等宽字体，更贴合XML的排版 */
  }
</style>
<table> 
  <tr> 
    <td>Heading 1</td> 
    <td>Heading 2</td> 
    <td>Heading 3</td> 
  </tr> 
  <tr>
    <td>value 1</td> 
    <td>value 2</td> 
    <td class="xml-display">
&lt;?xml version="1.0" encoding="utf-16"?&gt;
&lt;ArrayOfMENU_BO xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"&gt;
  &lt;MENU_BO&gt;
    &lt;ID&gt;2&lt;/ID&gt;
    &lt;CreatedBy&gt;0&lt;/CreatedBy&gt;
    &lt;CreatedOn&gt;0001-01-01T00:00:00&lt;/CreatedOn&gt;
    &lt;ModifiedBy&gt;0&lt;/ModifiedBy&gt;
  &lt;/MENU_BO&gt;
&lt;/ArrayOfMENU_BO&gt;
    </td>
  </tr> 
</table>
</html>

方法3：JavaScript动态处理（适合XML是动态加载的场景） #

如果你的XML内容是通过JS动态获取的，直接用textContent属性设置内容，浏览器会自动帮你转义特殊字符，再配合CSS样式就能完美显示：

<html>
<style>
  .xml-display {
    white-space: pre-wrap;
    font-family: monospace;
  }
</style>
<table> 
  <tr> 
    <td>Heading 1</td> 
    <td>Heading 2</td> 
    <td>Heading 3</td> 
  </tr> 
  <tr>
    <td>value 1</td> 
    <td>value 2</td> 
    <td id="xml-cell" class="xml-display"></td>
  </tr> 
</table>
<script>
  // 假设这是你获取到的XML字符串
  const xmlContent = `<?xml version="1.0" encoding="utf-16"?>
<ArrayOfMENU_BO xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <MENU_BO>
    <ID>2</ID>
    <CreatedBy>0</CreatedBy>
    <CreatedOn>0001-01-01T00:00:00</CreatedOn>
    <ModifiedBy>0</ModifiedBy>
  </MENU_BO>
</ArrayOfMENU_BO>`;
  // 获取目标td元素，用textContent设置内容
  document.getElementById('xml-cell').textContent = xmlContent;
</script>
</html>

我个人常用第一种方法，简单直接，适合静态内容；如果是动态加载的XML，第三种方法更省心，不用手动转义字符。

内容的提问来源于stack exchange，提问作者Lokesh