替代<xmp>或<pre>的方案：动态JSON数据中原样显示HTML代码

我之前也碰到过一模一样的场景——动态加载的表格数据里混着HTML代码，要原样展示但又不能破坏表格本身的样式，用<xmp>或<pre>确实会把表格布局搞乱。给你几个实用的方案，都是不用这两个标签的：

核心思路：转义HTML特殊字符 #

浏览器会把<、>、&这些字符当成HTML标签的一部分解析，所以只要把这些特殊字符转换成对应的HTML实体（比如<转成<，>转成>），浏览器就会把它们当成普通文本显示，同时表格的结构和样式完全不受影响。

1. 原生JavaScript手动转义 #

写一个简单的转义函数，在把数据插入表格之前处理一下：

function escapeHtml(text) {
  return text
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

// 使用示例：假设你从JSON拿到的数据是rowData.content
const escapedContent = escapeHtml(rowData.content);
// 然后把escapedContent插入到表格单元格里，比如：
document.getElementById('table-cell').textContent = escapedContent;

这里用textContent而不是innerHTML，确保转义后的文本不会被再次解析成HTML。

2. 利用DOM API自动转义 #

如果你不想手动写替换规则，可以用浏览器自带的DOM方法来自动处理：

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

这个方法更省心，浏览器会帮你处理所有需要转义的特殊字符，返回的就是已经转义好的字符串，直接用innerHTML插入到单元格也没问题。

3. 框架环境下的解决方案 #

如果你用Vue、React这类框架，其实框架本身就自带了转义功能：

• Vue：用双大括号{{ row.content }}插值，默认就是自动转义的，千万不要用v-html（那会把HTML解析出来）。
• React：直接用{row.content}渲染，React会自动转义特殊字符，确保内容以纯文本形式显示。

4. 后端辅助转义（可选） #

如果后端可以修改的话，让后端在返回JSON数据时就把HTML特殊字符转义好，前端直接渲染就行——不过你说不能改数据库，后端处理数据输出应该是允许的吧？当然前端处理也完全没问题，不用依赖后端。

这些方法的好处是：表格的结构、样式该怎么显示就怎么显示，只有数据里的HTML代码被转换成了纯文本原样展示，完美解决你的问题。

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