是否可以在不中断光标的情况下删除文本节点周围的 span 元素节点？

Question

在以下结构中：

<div contenteditable="true">
    <span class="some-class">Hello</span>
    World <!-- no span here -->
    <span class="some-other-class">and good bye!</span>
</div>

是否可以在不中断contenteditabledivdiv中的光标位置的情况下删除选定的span元素，但不能删除文本节点？

所以即使光标在 span 内，也保持相同的文本内容，只是移除它周围的 span 元素

例如，如果some-class 的样式是红色文本颜色并且我将光标放在单词“Hello”内的某个位置，那么我希望样式消失并删除包装span

Answer 1

给你！

<div contenteditable="true">
    <span class="some-class" style="color: red">Hello</span>
    <span class="some-class" style="color: blue">world</span>
    <span class="some-other-class" style="color: orange">and good bye!</span>
    <span style="color: green">test</span>
</div>

<script>
    const div = document.querySelector('div');

    const getSelection = () => {
        let offset = 0;
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        let start = range.startOffset;
        let end = range.endOffset;

        if (selection.baseNode.parentNode.hasChildNodes()) {
            for (const node of selection.baseNode.parentNode.childNodes) {
                const cnode = node;
                if (cnode.nodeType == document.TEXT_NODE && !(offset + cnode.length > start)) {
                    offset = offset + cnode.length;
                }
                if (cnode.nodeType == document.ELEMENT_NODE && !(offset + cnode.textContent.length > start)) {
                    offset = offset + cnode.textContent.length;
                }
            }
        }

        start = start + offset;
        end = end + offset;

        return { start, end };
    };

    const removeSpan = ({ target, currentTarget: { selectionStart } }) => {
        // Get our selection points for within our span element
        const { start, end } = getSelection();

        // Only run this logic for span elements
        if (target.tagName === 'SPAN') {
            // Create new text node from our span's innerText
            const text = document.createTextNode(target.innerText + ' ');

            // Replace span with just the text
            target.replaceWith(text);

            // Create a range and set selection range back to what it was to not affect cursor
            const range = document.createRange();
            range.setStart(text, start);
            range.setEnd(text, end);

            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
    };

    div.addEventListener('click', removeSpan);
</script>