如何在DOMPurify中允许<td>和<tr>标签？

你的问题核心在于DOMPurify会依据HTML合法上下文清理标签：<td>必须嵌套在<tr>中，<tr>必须嵌套在<table>这类容器内，直接孤立的<td>在默认的body上下文下会被判定为无效标签，因此被剥离后仅保留文本内容。

以下是两种可行的解决方法：

方法一：构建合法HTML结构 #

将生成的<td>包裹在符合规范的父标签中，比如<table><tr>...</tr></table>，这样DOMPurify会完整保留标签结构：

// 修改myJS.js中的代码
var tanCols1 = '<table><tr>'
for (var i = 0; i<10; i++){
    tanCols1 += "<td>"+i+"</td>";
}
tanCols1 += '</tr></table>'

这种方式生成的结构符合HTML规范，净化后能保留完整的表格标签，页面渲染时也能正常显示单元格样式。

方法二：指定DOMPurify的净化上下文 #

若确实需要保留孤立的<td>或<tr>标签，可通过CONTEXT参数指定净化上下文为表格相关环境，让DOMPurify允许这些标签存在：

var clean_data = DOMPurify.sanitize(tanCols1, {
    ALLOWED_TAGS:['option', 'td', 'tr', 'a', 'table'],
    CONTEXT: 'tr' // 指定上下文为tr，允许td作为子元素
})

若要同时允许<tr>标签，也可将CONTEXT设置为'table'。

内容的提问来源于stack exchange，提问作者Surendranatha Reddy T