本教程旨在解决datatables在加载包含html标签的数据时，意外渲染这些标签的问题。我们将探讨如何利用datatables的`columns.render`回调函数，结合jquery的`$.parsehtml`和dom元素的`innertext`属性，安全地提取纯文本内容并显示，从而防止恶意脚本执行和布局混乱。同时，也会介绍一种快速去除html标签的正则表达式方法，并强调数据源安全净化的重要性。
当DataTables加载包含HTML标签（如
, , ，甚至
- 布局混乱：HTML标签的样式和结构可能与表格的预期布局冲突。
- 安全漏洞（XSS）：如果数据来源于用户输入且未经过滤，恶意脚本标签（
- 数据展示不一致：希望显示纯文本而非渲染后的HTML。
本教程将提供两种主要方法来解决这些问题，并给出相应的代码示例和注意事项。
方法一：使用 columns.render 结合 $.parseHTML 提取纯文本
最推荐的方法是利用DataTables的columns.render选项，结合jQuery的$.parseHTML函数来安全地解析包含HTML的字符串，并提取其纯文本内容。这种方法能够有效防止HTML标签被渲染，同时也能抵御大部分XSS攻击。
工作原理
- columns.render: DataTables提供了一个render回调函数，允许你在数据被显示到单元格之前对其进行处理。
-
$.parseHTML( '' + data + '' ): jQuery的$.parseHTML函数可以将一个HTML字符串解析成DOM节点数组。为了确保无论原始数据是否包含HTML，都能得到一个有效的DOM结构，我们建议将原始数据包裹在一个标签中。这样做可以处理以下情况：
- 数据本身没有HTML标签。
- 数据只在字符串中间包含HTML标签。
- 数据以HTML标签开头或结尾。
- node.innerText: 解析后的DOM节点数组的第一个元素（即我们包裹的节点）可以通过innerText属性安全地获取其包含的所有纯文本内容，而忽略所有HTML标签。
示例代码
首先，确保你的HTML页面包含了DataTables和jQuery的必要库。
立即学习“前端免费学习笔记（深入）”；
DataTables HTML 渲染控制
DataTables 纯文本显示示例
姓名
年龄
潜在风险", "age": 55 }
];
$('#example').DataTable({
data: myData,
columns: [
{
data: "name",
render: function(data, type, row, meta) {
// 使用 $.parseHTML 解析数据，并用 包裹以确保结构完整
let node = $.parseHTML('' + data + '')[0];
// 返回解析后的纯文本内容
return node.innerText;
}
},
{ data: "age" }
]
});
});
在上述示例中，render函数会处理name列的数据。即使name字段包含p、b、h4或script等标签，最终显示在表格中的都将是这些标签内的纯文本内容。
注意事项
- 安全性增强：这种方法能有效阻止恶意脚本的执行，因为innerText只会提取文本，而不会执行脚本。
- HTML注释处理：对于HTML注释（如），innerText会忽略注释内部的内容，只显示注释外的文本。
- 数据源净化：尽管此方法在客户端提供了保护，但最佳实践仍然是在数据源头（服务器端）对用户输入进行严格的净化和验证，以防止不安全的数据进入系统。
方法二：正则表达式快速去除HTML标签
如果你的需求仅仅是简单地去除所有HTML标签，并且对安全性要求不是极高（因为正则表达式可能无法完全覆盖所有复杂的HTML或恶意注入场景），可以使用正则表达式进行快速替换。DataTables自身在处理HTML类型列的排序时也采用了类似的方法。
工作原理
使用JavaScript的String.prototype.replace()方法结合正则表达式/ <.>/g来匹配并移除所有HTML标签。
- / <.>/g: 这是一个正则表达式。
- <:>
- .*?: 匹配任意字符（.）零次或多次（*），但尽可能少地匹配（?，非贪婪模式），直到遇到下一个模式。
- >: 匹配结尾的右尖括号。
- g: 全局匹配标志，确保替换所有匹配项。
示例代码
在DataTables的初始化中，修改name列的render函数：
$(document).ready(function() {
var myData = [
{ "name": "杰克
", "age": 29 },
{ "name": "玛德琳夫人", "age": 39 },
{ "name": "永恒之焰
", "age": 45 },
{ "name": "普通姓名无HTML", "age": 45 },
{ "name": "包含内部HTML的姓名", "age": 45 },
{ "name": "潜在风险", "age": 55 }
];
$('#example').DataTable({
data: myData,
columns: [
{
data: "name",
render: function(data, type, row, meta) {
// 使用正则表达式去除所有HTML标签
return data.replace(/<.*?>/g, '');
}
},
{ data: "age" }
]
});
});注意事项
- 简便性：这种方法代码简洁，易于实现。
-
局限性：
- 安全性较低：正则表达式在处理复杂或嵌套的HTML结构，以及防范所有XSS变体方面不如DOM解析器（如$.parseHTML）健壮。例如，它可能无法正确处理某些畸形的HTML或特殊编码的攻击。
-
可能误删内容：如果数据中包含类似HTML标签的非HTML文本（例如
作为XML数据的一部分），它也会被删除。 - 不处理HTML实体：此方法只会删除标签，不会解码HTML实体（如zuojiankuohaophpcn会被保留为zuojiankuohaophpcn而不是
最佳实践与总结
在处理DataTables中包含HTML的数据时，选择合适的方法至关重要：
-
首选 $.parseHTML + innerText：
- 安全性高：能够有效防止XSS攻击，因为它只提取纯文本。
- 鲁棒性好：基于DOM解析，对HTML结构的处理更为准确。
- 推荐场景：当你需要从富文本中提取纯文本进行显示，并且数据可能包含用户输入时。
-
谨慎使用正则表达式：
- 适用于简单场景：如果数据源可信，且HTML结构简单，仅需快速去除标签，可以考虑。
- 不作为主要安全措施：不应将其作为防范XSS攻击的主要手段。
-
源头净化是关键：
- 无论客户端采取何种措施，最根本且最安全的做法是在数据进入系统时（通常在服务器端）就对其进行严格的净化和验证。移除或转义所有潜在的恶意HTML和脚本标签，确保存储和传输的数据是安全的。
通过合理运用DataTables的columns.render功能，结合jQuery提供的强大工具或简单的正则表达式，开发者可以有效地控制DataTables中数据的渲染方式，提升用户体验，并增强应用程序的安全性。
