如何让 DataTables 原样显示 HTML 实体与转义字符（不解析渲染）-html教程-PHP中文网

如何让 DataTables 原样显示 HTML 实体与转义字符（不解析渲染）

DataTables 默认会将单元格内容作为 HTML 渲染，导致、& 等被解析。本文介绍使用 DataTable.render.text() 渲染器强制以纯文本方式显示原始字符串，确保 CSV 中的转义序列、标签符号等一字不差地呈现。

datatables 默认会将单元格内容作为 html 渲染，导致 ``、`&` 等被解析。本文介绍使用 `datatable.render.text()` 渲染器强制以纯文本方式显示原始字符串，确保 csv 中的转义序列、标签符号等一字不差地呈现。

在基于 Flask 的数据展示应用中，当用户上传含特殊字符（如 <i>I</i> & <b>B</b>）的 CSV 文件时，若直接将原始字符串传入 DataTables，它会自动执行 HTML 解析——即使你已用 String.raw 包裹或在服务端未做任何转义处理。这是因为 DataTables 的默认渲染行为等价于 .innerHTML = value，而非 .textContent = value。

✅ 正确解法是：在初始化 DataTable 时，为指定列显式声明 render: DataTable.render.text()。该内置渲染器会调用 document.createTextNode(value)，确保所有字符（包括 , <code>&, \n, \t 等）均以字面量形式输出，完全绕过 HTML 解析引擎。

以下为可直接运行的完整示例（关键改动已加注释）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet"><script src="https://nightly.datatables.net/js/dataTables.js"></script>

Test: <input id="i" type="text" oninput="redraw(value)" size="50"><div class="container">
  <table id="data-table" width="100%" border><thead><tr>
<th>默认渲染（HTML 解析）</th>
        <th>text() 渲染（原样显示）</th> <!-- 新增一列用于对比 -->
      </tr></thead></table>
</div>

<script>
  const sample = '<i>I & <b>B';

  // ✅ 关键：初始化时配置 columnDefs，对第1列（索引为1）启用 text 渲染器
  const data_table = $("#data-table").DataTable({
    columnDefs: [{
      targets: [1], // 指定第二列（索引从0开始）
      render: DataTable.render.text() // 强制纯文本渲染
    }]
  });

  function redraw(value) {
    data_table.clear();
    // 同一数据传入两列：左列按默认方式（会解析），右列走 text() 渲染器（原样显示）
    data_table.row.add([value, value]);
    data_table.draw();
  }

  i.value = sample;
  i.oninput(); // 触发首次渲染
</script>

? 注意事项：