如何阻止DataTable渲染JSON中的HTML标签？

DataTable默认会解析渲染内容中的HTML标签，要让这些标签以纯文本形式显示，可通过以下两种方式实现：

方法一：用自定义列渲染函数（推荐） #

通过columns.render配置为目标列添加HTML转义逻辑，将标签转换为实体字符，避免浏览器解析。

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
    </head>
    <body>
        <table id="example" class="display table table-striped" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
    </table>
    
    </body>
        <script>
        $(document).ready(function(){
        var myData = 
 [
    {
      "name": "<p>Jack</p>",
      "age": 29      
    },
    {
      "name": "<b><i>Madame Uppercut</i></b>",
      "age": 39
    },
    {
      "name": "<h4 style='color:red'>Eternal Flame</h4>",
      "age": 45
    }
  ];
            $('#example').DataTable({
                data: myData,
                "columns": [
                    {
                        "data":"name",
                        "render": function(data) {
                            // 利用jQuery将HTML转为纯文本
                            return $('<div>').text(data).html();
                        }
                    },
                    {"data":"age"}
                ]
            });
        });         
        </script>
</html>

这里通过$('<div>').text(data).html()把原始HTML内容转义为实体字符，DataTable会直接显示这些字符，而非渲染HTML结构。

方法二：原生JavaScript转义函数 #

不依赖jQuery的话，可自定义转义函数处理HTML标签：

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

将其应用到渲染逻辑中：

"render": function(data) {
    return escapeHtml(data);
}

额外说明 #

• 若需处理多列，可使用columnDefs批量配置，指定目标列索引统一应用转义规则。
• 该方式同时能防范XSS风险，恶意script标签等会被转为纯文本，不会执行。

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