如何在Bootstrap Modal等弹窗中显示带标签的原始XML数据？

核心逻辑是让弹窗库将XML内容视为纯文本而非HTML解析，这样无需修改原始数据，就能完整保留标签和格式。以下是针对不同弹窗库的具体实现方式：

1. Bootstrap Modal #

Bootstrap Modal默认会把内容当作HTML解析，需改用text()方法插入内容：

// 假设原始XML数据存储在xmlData变量中
const xmlData = '<Account>\n    <Name>Customer Name</Name>\n    <Balance>Current Balance</Balance>\n</Account>';

// 向模态框内容容器插入纯文本
$('#myModal .modal-body').text(xmlData);
// 显示模态框
$('#myModal').modal('show');

2. BootBox #

BootBox默认会自动转义HTML字符，直接传入原始XML字符串即可：

const xmlData = '<Account>\n    <Name>Customer Name</Name>\n    <Balance>Current Balance</Balance>\n</Account>';

bootbox.alert({
    message: xmlData,
    escape: true // 默认开启，无需手动修改原始数据，自动转义标签
});

注意：不要用$(xmlData)的方式传入，否则会被当作HTML解析

3. jAlert #

通过contentType参数强制设置为纯文本模式：

const xmlData = '<Account>\n    <Name>Customer Name</Name>\n    <Balance>Current Balance</Balance>\n</Account>';

jAlert(xmlData, 'XML内容', {
    contentType: 'text'
});

4. SweetAlert2 #

使用text参数替代html参数传入内容：

const xmlData = '<Account>\n    <Name>Customer Name</Name>\n    <Balance>Current Balance</Balance>\n</Account>';

Swal.fire({
    title: 'XML内容',
    text: xmlData // text参数会将内容视为纯文本，自动转义标签
});

若要实现代码块排版效果，可借助库内置的转义方法：

Swal.fire({
    title: 'XML内容',
    html: '<pre><code>' + Swal.escapeHtml(xmlData) + '</code></pre>'
});

5. 旧版SweetAlert #

同样用text参数传入原始XML：

const xmlData = '<Account>\n    <Name>Customer Name</Name>\n    <Balance>Current Balance</Balance>\n</Account>';

swal({
    title: 'XML内容',
    text: xmlData
});

内容的提问来源于stack exchange，提问作者Mehedi Hasan Kajol