DOMPurify - 如何保留已删除（不需要的）span 标签中包含的（子）强标签？

Question

我使用 DOMPurify 库 (https://github.com/cure53/DOMPurify) 来清理从 google 文档复制的 html 代码。

我想从复制的文本中删除跨度标签，但保留标签内的文本以及删除的跨度标签中包含的任何强标签。

我设法删除跨度标签，同时将文本保留在标签内，但任何强标签也会被删除。

示例

DOMPurify.sanitize("<p>
<span style="background-color:transparent;color:#000000;"><strong>Some strong text</strong></span>
</p>", {
    ALLOWED_TAGS: ['p','strong']
})

输出

<p>Some strong text</p>

预期产量

<p><strong>Some strong text</strong></p>

我也尝试过这种挂钩

DOMPurify.addHook("afterSanitizeAttributes", function (node, data, config) {
  if (node.nodeName === "SPAN") {
    node.replaceWith(node.textContent ?? "");
  }
});

但是输出是一样的，

<strong>

里面的

<span>

标签也被删除了。

你能帮我在“消毒”之后保留（子）

<strong>

标签吗？

非常感谢

Answer 1

首先，你的代码确实有效。

但解决方法是将所有

<strong>

替换为

[strong]

，净化，然后替换回来。您可以添加逻辑来预先检查字符串是否包含

[strong]

以使其稳健。我会假设它不存在。

function replaceStrong(text) {
  return text.replace(/<\/?strong>/gi, match =>
    match.startsWith('</') ? '[/strong]' : '[strong]'
  )
}

function restoreStrong(text) {
  return text.replace(/\[\/?(strong)\]/g, match =>
    match.startsWith('[/') ? '</strong>' : '<strong>'
  )
}

function myPurify(html) {
  var stronger = replaceStrong(html)
  var replaced = DOMPurify.sanitize(stronger, {
    ALLOWED_TAGS: ['p', 'strong']
  })
  return restoreStrong(replaced)
}

var result = myPurify(`<p>
  <span style="background-color:transparent;color:#000000;"><strong>Some strong text</strong></span>
</p>`)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.7/purify.js" integrity="sha512-QrJgumdAGShrxG5uB7fPRQmjs4cQU6FJee9lspckHT6YYwpilnoUuj2+v5L29mmA/kvLQBjkphsROlRPjtC61w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>