如何用JavaScript移除contentEditable <div>选中文本中的span标签？

你的代码目前会删除页面所有span标签，核心原因是recover函数完全忽略了传入的选区对象，直接遍历了整个文档的<span>元素。要实现只移除选区内的span，需要基于选区范围来定位并处理目标元素。

修正思路 #

1. 校验选区有效性：点击按钮时先判断是否有选中内容，避免无操作时执行无效逻辑
2. 定位选区内的span：通过选区的范围（Range）获取所有包含在选区内的span标签，包括嵌套的
3. 安全移除span标签：从内到外处理嵌套的span（倒序遍历），避免DOM结构变化导致的元素丢失，同时保留标签内的文本内容

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div contentEditable class="inner_card" id="card_txt">
        <p id="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            <span style="color:red;"><span style="font-weight:bold;">Exercitationem magnam</span> magni pariatur suscipit?</span> Assumenda molestias harum, 
            esse eligendi dolores eius nemo deserunt placeat dolorem necessitatibus exercitationem, 
            quaerat quo, qui iste dignissimos neque amet aut aperiam. 

            Vel exercitationem <span style="font-weight:bold;">deserunt reprehenderit</span> expedita temporibus esse, 
            et totam consequatur provident recusandae optio facilis, ipsam culpa, deleniti tenetur! 

            Fuga ab consequuntur natus omnis cum in eos praesentium animi corporis accusamus quas labore 
            nobis tenetur doloribus totam alias, <span style="font-style:italic; font-weight:bold;">vitae eius repellendus voluptates,</span> quod autem magnam necessitatibus. 
            Quia temporibus quibusdam suscipit, incidunt officia ea perferendis laborum adipisci, 
            consequatur <span style="text-decoration:underline 2px green;">veniam, sequi ipsum accusantium vel odit nobis esse minus.</span>
        </p>    
        <button id="normal">Normalize text</button>
    </div>

    <script>
        function recover(selection) {
            if (!selection || selection.isCollapsed) return;

            const range = selection.getRangeAt(0);
            // 创建TreeWalker，遍历选区内所有span元素
            const treeWalker = document.createTreeWalker(
                range.commonAncestorContainer,
                NodeFilter.SHOW_ELEMENT,
                { acceptNode: node => node.tagName === 'SPAN' && range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }
            );

            // 收集所有符合条件的span，倒序处理避免嵌套问题
            const spans = [];
            let currentNode;
            while (currentNode = treeWalker.nextNode()) {
                spans.push(currentNode);
            }

            // 从内到外移除span，保留内容
            for (let i = spans.length - 1; i >= 0; i--) {
                const span = spans[i];
                const parent = span.parentNode;
                while (span.firstChild) {
                    parent.insertBefore(span.firstChild, span);
                }
                parent.removeChild(span);
            }
        }

        document.getElementById("normal").onclick = function() {        
            const selec = document.getSelection();
            recover(selec);
        }           
    </script>   
</body>
</html>

关键代码说明 #

• TreeWalker：用来精准遍历选区内的所有span元素，range.intersectsNode(node)确保只处理和选区有交集的span
• 倒序遍历：嵌套的span需要从最内层开始处理，否则删除外层span后，内层span的DOM位置会变化，导致漏处理
• 选区校验：提前判断选区是否折叠（无选中内容），避免无效执行

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