求助：TypeScript实现仅保留白名单标签且保留文本的HTML处理方案

问题分析 #

你的需求核心是递归清理嵌套HTML结构，只保留白名单内的标签，移除其他标签但保留其内部文本/合法标签，且不能用正则。现有代码的问题在于：

• 未区分元素节点和文本节点（child可能是Text节点，不能直接转HTMLElement）
• 用in操作符判断数组白名单是错误的（in判断的是索引，不是元素值）
• 遍历childNodes时直接修改DOM会打乱遍历顺序
• 缺少移除非法标签并保留子内容的核心逻辑

修正后的实现思路 #

1. 把白名单转为大写Set：DOM节点的nodeName是大写格式（比如<div>的nodeName是DIV），Set的查找效率更高
2. 从内到外递归处理：先处理所有子节点，再处理当前节点，避免父节点修改影响子节点遍历
3. 遍历子节点时转成数组：避免DOM节点被移除后，childNodes集合变化导致遍历不完整
4. 非法标签处理：如果当前元素不在白名单，将它的所有子节点移动到父节点中，然后删除当前元素

完整TypeScript代码 #

const sanitizeHtml = (currElem: Node, whiteList: string[]) => {
    // 转成大写Set，匹配nodeName的大写格式
    const allowedTags = new Set(whiteList.map(tag => tag.toUpperCase()));

    // 把childNodes转成数组，避免遍历中DOM变化导致的问题
    const children = Array.from(currElem.childNodes);

    // 先递归处理所有子节点（从内到外）
    children.forEach(child => {
        if (child.nodeType === Node.ELEMENT_NODE) {
            sanitizeHtml(child, whiteList);
        }
    });

    // 处理当前节点：仅针对元素节点，文本节点直接保留
    if (currElem.nodeType === Node.ELEMENT_NODE) {
        const elem = currElem as HTMLElement;
        if (!allowedTags.has(elem.nodeName)) {
            // 把当前节点的所有子节点移到父节点
            while (elem.firstChild) {
                currElem.parentNode?.insertBefore(elem.firstChild, currElem);
            }
            // 删除当前非法标签
            currElem.parentNode?.removeChild(currElem);
        }
    }
};

使用示例 #

// 示例：保留p、span标签，移除其他标签
const targetElem = document.getElementById('target') as HTMLElement;
sanitizeHtml(targetElem, ['p', 'span']);

关键细节说明 #

• 节点类型判断：通过nodeType区分元素节点（Node.ELEMENT_NODE）和文本节点，避免非元素节点被错误处理
• DOM操作顺序：先处理子节点再处理当前节点，确保嵌套的非法标签先被清理，再处理外层
• Set查找：相比数组includes，Set的has方法时间复杂度是O(1)，处理大量节点时效率更高

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