DOMPurify（在ckeditor5上下文中）-如何将（子）强标签包含在已删除（不需要的）跨度标签中？

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>

Answer 2

IT goldman，感谢您的回复，特别感谢您指出我的代码有效。 您的评论促使我进一步进行测试。 事实上，除了 ckeditor 5 之外，我还使用 DOMPurify 库 (https://ckeditor.com/ckeditor-5/)。 您的评论促使我在 ckeditor 上下文之外测试我的 DOMPurify 代码，事实上，通过这样做我意识到我的代码按预期工作。

因此，我通过继续测试 ckeditor 上下文来调查了解发生了什么。

事实上，我在 ckeditor 配置中保留了“字体”插件的活动状态，因此 ckeditor 在 DOMPurify 清理后不断添加这个不需要的

<span>

标签。是什么让我不安。

<span style="background-color:transparent;color:#000000;"></span>

这篇文章帮助我识别并解决了我的问题 https://github.com/ckeditor/ckeditor5/issues/6492

在 ckeditor 配置中删除字体插件后，一切都按预期工作。

事实上，我什至不再需要添加 DOMPurify，因为 ckeditor 的 Paste from Office/Paste from Google Docs 功能可以完美地满足我的需求清理 google 文档代码。

再次感谢您的帮助并花时间回答我，因为这让我能够退后一步并解决我的问题。

也感谢暂时强转强的想法。我会把这个逻辑放在我的后口袋里，因为它在其他情况下肯定对我有用。

我会修改我的帖子标题并添加ckeditor标签，因为事实上问题更多地涉及ckeditor而不是DOMPurify。

再次感谢