如何在div中预览txt文件，避免文件内的HTML代码被渲染而非原样显示

你使用innerHTML接口将读取到的txt内容插入页面时，浏览器会自动把内容里的HTML标签当作真实DOM元素解析渲染，因此无法原样展示代码内容。

方案1：替换innerHTML为textContent（最简单，仅需修改一行代码） #

把JS代码中reader.onload回调里的逻辑：

document.getElementById('preview').innerHTML = e.target.result;

修改为：

document.getElementById('preview').textContent = e.target.result;

textContent是浏览器专门用于插入纯文本的接口，不会解析任何HTML标签，会原样展示所有文本内容，完全匹配你的需求。

方案2：对内容做HTML转义后再用innerHTML（适合需要自定义文本格式的场景） #

如果你后续需要保留txt文件里的换行、连续空格等格式，可以先对内容的特殊HTML字符做转义后再插入：

1. 新增HTML转义函数

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

2. 修改插入逻辑

reader.onload = function(e) {
  document.getElementById('preview').innerHTML = escapeHTML(e.target.result);
};

3. 可选：给preview元素添加CSS保留文本原生格式

.preview {
  white-space: pre-wrap;
  word-wrap: break-word;
}

内容的提问来源于stack exchange，提问作者18501A1275 pagala sri ranga sa