CKEditor5场景下DOMPurify：移除span同时保留内部strong标签

要实现移除<span>标签但保留其内部的<strong>标签和文本，你需要调整DOMPurify的配置和钩子逻辑，核心是保留span节点让钩子能处理其子节点，再将子节点直接迁移到span的父节点中，而不是用textContent把标签转成纯文本。

步骤1：注册正确的钩子 #

使用uponSanitizeElement钩子（这个时机能确保节点还未被DOMPurify处理），遍历span的所有子节点，将它们逐个移动到span的父节点里，最后删除span本身：

DOMPurify.addHook('uponSanitizeElement', function(node, data, config) {
  if (node.nodeName === 'SPAN') {
    // 把span的子节点依次移到父节点中，保留原有DOM结构
    while (node.firstChild) {
      node.parentNode.insertBefore(node.firstChild, node);
    }
    // 删除空的span节点
    node.parentNode.removeChild(node);
    // 返回false阻止DOMPurify继续处理该节点
    return false;
  }
});

步骤2：调整ALLOWED_TAGS配置 #

必须将span加入ALLOWED_TAGS，否则DOMPurify会在钩子触发前就移除span节点，直接把内部内容转成纯文本：

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

输出结果 #

执行后会得到你期望的HTML：

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

为什么之前的方法失效？ #

• 直接设置ALLOWED_TAGS: ['p','strong']时，DOMPurify会把不允许的span节点移除，并将其内部的所有内容（包括strong标签）转成纯文本输出。
• 你之前用的afterSanitizeAttributes钩子时机太晚，且node.replaceWith(node.textContent)会把所有子节点（包括strong）转换成纯文本，导致标签丢失。

内容的提问来源于stack exchange，提问作者Ripcurl