本文旨在指导开发者如何在datatables中有效防止数据中的html标签被意外渲染。通过利用datatables的`columns.render`函数，结合jquery的`$.parsehtml`方法和dom元素的`innertext`属性，我们可以安全地从包含html的数据中提取纯文本内容，从而避免潜在的样式破坏和安全风险，确保数据以纯净、可控的方式显示。
当使用DataTables展示数据时，如果数据源中包含HTML标签（例如<p>, <b>, <h4>等），DataTables默认会将这些标签作为HTML内容进行解析和渲染。这在某些情况下可能是期望的行为，例如需要自定义单元格的样式或结构。然而，在更多情况下，我们可能只希望显示数据中的纯文本内容，而忽略或移除其中的HTML标签。
不加处理地渲染HTML标签可能导致以下问题：
考虑以下示例，其中数据源的name字段包含各种HTML标签：
<html>
<head>
<title>DataTables HTML渲染问题</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"},{"data":"age"}] // 默认渲染HTML
});
});
</script>
</html>上述代码将直接渲染<p>Jack</p>、<b><i>Madame Uppercut</i></b>和<h4 style='color:red'>Eternal Flame</h4>，导致单元格内容以HTML标签的样式呈现。
立即学习“前端免费学习笔记（深入）”；
DataTables提供了一个强大的columns.render选项，允许开发者在数据被渲染到单元格之前对其进行自定义处理。这是解决HTML渲染问题的关键。
columns.render是一个函数，它接收以下参数：
通过在render函数中处理data参数，我们可以确保只有纯文本内容被返回并显示在表格中。
为了从包含HTML的字符串中安全地提取纯文本，我们可以结合使用jQuery的$.parseHTML函数和DOM元素的innerText属性。
以下是如何在DataTables中应用上述解决方案的完整示例：
<html>
<head>
<title>DataTables阻止HTML渲染</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
},
{
"name": "Normal Name No HTML", // 纯文本数据
"age": 45
},
{
"name": "Not <b>Normal</b> Name - HTML inside the string", // HTML在字符串中间
"age": 45
}
];
$('#example').DataTable({
data: myData,
columns: [{
data: "name",
render: function(data, type, row, meta) {
// 确保数据被包裹在<span>中，然后解析为DOM节点
let node = $.parseHTML( '<span>' + data + '</span>' )[0];
// 返回节点的纯文本内容
return node.innerText;
}
},
{
data: "age"
}
]
});
});
</script>
</html>在这个示例中，name列的render函数会接收原始的HTML字符串，将其解析为DOM节点，然后提取并返回其innerText，从而在表格中只显示“Jack”、“Madame Uppercut”等纯文本内容。
上述$.parseHTML方法假定数据中的HTML是结构良好且有效的。如果HTML字符串是残缺不全或格式错误的，$.parseHTML可能无法正确解析，导致innerText返回非预期结果或错误。在生产环境中，最好确保数据源提供的HTML是符合标准的。
如果数据中包含HTML注释（例如<!-- comment -->），$.parseHTML会将其视为注释节点。当提取innerText时，注释内的文本通常会被忽略。例如，对于字符串" not a comment<!-- comment -->"，innerText将返回" not a comment"。如果整个单元格内容都是注释，则会显示为空白。
在数据中包含可执行的JavaScript脚本（如<script>alert("test")</script>）是一个严重的潜在安全风险。强烈建议在数据源层面就对用户输入进行严格净化，绝不允许直接存储和传输可执行脚本。
如果数据中确实出现了脚本标签，有以下几点需要注意：
// 编码后的脚本字符串示例
"<p>Hello</p><script>alert('XSS Attack!');</script>"// 使用单引号避免冲突
"<script>alert('test');</script>"核心警告: 无论采用何种前端处理方式，在数据源头对所有用户输入进行严格的HTML净化和转义是防止XSS攻击的最根本和最重要的措施。 不应依赖前端渲染逻辑来消除恶意脚本的威胁。
如果需求仅仅是简单地移除所有HTML标签，并且不涉及复杂的HTML结构解析或潜在的脚本执行风险，可以使用正则表达式进行快速清理。DataTables内部在处理某些数据类型（如html类型列的排序）时也采用了类似的方法：
render: function(data, type, row, meta) {
// 简单地替换所有HTML标签为空字符串
return data.replace( /<.*?>/g, '' );
}这个方法会将所有形如<tag>的结构替换为空，从而达到移除标签的目的。它的优点是简洁高效，但缺点是：
因此，对于要求更高的场景，尤其是涉及用户输入时，$.parseHTML结合innerText是更推荐且更安全的方法。
在DataTables中防止HTML标签被意外渲染，主要通过利用columns.render函数实现。结合jQuery的$.parseHTML方法和DOM元素的innerText属性，可以从包含HTML的数据中安全地提取纯文本内容，从而确保表格数据的整洁性和安全性。同时，务必牢记在数据源头进行严格的数据净化和转义，这是防范XSS等安全威胁的根本保障。在简单场景下，正则表达式提供了一个快速移除标签的方案，但其健壮性不如基于DOM解析的方法。选择哪种方法取决于具体的业务需求、数据特性以及对安全性的考量。
以上就是DataTables教程：安全处理数据中的HTML标签，防止意外渲染的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
124
收藏
