如何使用innerHTML在UI上原样展示XML字符串

嘿，我完全懂你遇到的麻烦！当你直接把XML字符串通过innerHTML渲染到UI上时，浏览器会下意识把它当成可解析的HTML/XML标记来处理，而不是纯文本——这就是为什么你看不到原本的XML代码，反而出现奇怪的渲染结果。

要解决这个问题，核心是把XML里的特殊字符转义成HTML实体，这样浏览器就会把它们当成普通文本展示，而不是去解析成DOM元素。下面是具体的实现步骤：

1. 编写一个XML转义函数 #

在你的Angular组件里添加一个转义函数，把XML中的特殊符号替换成对应的HTML实体：

escapeXml(xmlString: string): string {
  return xmlString
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

2. 处理你的XML字符串 #

在组件类里，把原始XML字符串传入转义函数，得到转义后的版本：

// 你的原始XML字符串
originalXml = `<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<SOAP-ENV:Envelope xmlns:SOAP-ENV=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:ns1=\"http://webservice.abc.abc.abc.com/\"><SOAP-ENV:Body><ns1:transactRequest><transactRequestLineItemList><transactRequestLineItem><orderLineItemId>1</orderLineItemId><partNumber>xyz</partNumber><quantity>xyz</quantity><sourceInventoryLocation>xyz</sourceInventoryLocation><region>QTM-FLD-NAM</region><transactionOperation>RESERVE</transactionOperation></transactRequestLineItem></transactRequestLineItemList></ns1:transactRequest></SOAP-ENV:Body></SOAP-ENV:Envelope>`;

// 转义后的XML字符串
escapedXml = this.escapeXml(this.originalXml);

3. 在模板中使用innerHTML渲染 #

现在把转义后的字符串通过innerHTML绑定到DOM元素上，如果想要保留XML的换行和缩进格式，推荐用<pre>和<code>标签包裹，这样展示效果更友好：

<pre><code [innerHTML]="escapedXml"></code></pre>

这样处理之后，浏览器就会原封不动地展示你的XML字符串，不会再把标签解析成DOM元素啦！

备注：内容来源于stack exchange，提问作者Pranay Khilari