17370845950

本教程旨在解决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攻击。

工作原理

1. columns.render: DataTables提供了一个render回调函数，允许你在数据被显示到单元格之前对其进行处理。
2. $.parseHTML( '' + data + '' ): jQuery的$.parseHTML函数可以将一个HTML字符串解析成DOM节点数组。为了确保无论原始数据是否包含HTML，都能得到一个有效的DOM结构，我们建议将原始数据包裹在一个标签中。这样做可以处理以下情况：
   • 数据本身没有HTML标签。
   • 数据只在字符串中间包含HTML标签。
   • 数据以HTML标签开头或结尾。
3. node.innerText: 解析后的DOM节点数组的第一个元素（即我们包裹的节点）可以通过innerText属性安全地获取其包含的所有纯文本内容，而忽略所有HTML标签。

示例代码

首先，确保你的HTML页面包含了DataTables和jQuery的必要库。

    
    
    
    
    
    


    
        
DataTables 纯文本显示示例
        

            

                

                    
姓名
                    
年龄
                
            
        
    

    alert('危险脚本!');潜在风险", "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的数据时，选择合适的方法至关重要：

1. 首选 $.parseHTML + innerText：

   • 安全性高：能够有效防止XSS攻击，因为它只提取纯文本。
   • 鲁棒性好：基于DOM解析，对HTML结构的处理更为准确。
   • 推荐场景：当你需要从富文本中提取纯文本进行显示，并且数据可能包含用户输入时。

2. 谨慎使用正则表达式：

   • 适用于简单场景：如果数据源可信，且HTML结构简单，仅需快速去除标签，可以考虑。
   • 不作为主要安全措施：不应将其作为防范XSS攻击的主要手段。

3. 源头净化是关键：

   • 无论客户端采取何种措施，最根本且最安全的做法是在数据进入系统时（通常在服务器端）就对其进行严格的净化和验证。移除或转义所有潜在的恶意HTML和脚本标签，确保存储和传输的数据是安全的。

通过合理运用DataTables的columns.render功能，结合jQuery提供的强大工具或简单的正则表达式，开发者可以有效地控制DataTables中数据的渲染方式，提升用户体验，并增强应用程序的安全性。