javascript - 如何删除 contenteditable 中元素的尾随空格？

Question

我已经尝试了一段时间了，请在下面找到我到目前为止的工作。

/**
     * @param {any} container contenteditable container
     * @param {any} node  element contained inside the container for which we need to 
     * remove the space from
     */
    function removeTrailingSpace(container,node){
        if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection(), range;
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0).cloneRange();
                range.collapse(true);
                range.setStartAfter(node);
                range.setEnd(container, 1);

                var rString = range.toString();
                var sChar = range.toString().length > 0 ? rString[0] : null;

                if (sChar && sChar.trim() === '') {
                    console.log("TRAILING SPACE FOUND");
                    range.setEnd(range.startContainer, range.startOffset + 1);
                    range.deleteContents();
                }
            }
        }
    }

更具体地说，我需要从 contenteditable div 中删除按钮元素后面的“ ”。

任何建议将不胜感激。谢谢

Answer 1

我找到了解决您问题的方法，您尝试删除的空格实际上是一个文本节点。请尝试以下代码:

function removeTrailingSpace(container, node) {
    const values = Array.from(container.childNodes.values());
    const value = values.find(x => x === node);
    const index = values.indexOf(value);
    const nextNode = container.childNodes[index + 1];
    if(nextNode.nodeValue.length === 1 && nextNode.nodeValue.charCodeAt(0) === 160) {
        console.log('Whitespace found, removing...');
        container.removeChild(nextNode);
    }
}