Question

我正在尝试在contentEditable div的任何选定文本中删除所有带有“ high”类的标签。

跨度节点是完全选择还是部分选择都没有关系！像示例一样：

在上面的示例中，请注意，带有“显示高亮”文本的跨度只是部分选择！但是，当用户单击一个按钮“删除突出显示”时，我正在尝试使该类消失！但是保留文本（仅删除标签）。而且，如果所选内容具有一个或多个跨度为“高”的跨度，则应删除所有跨度！

我真的很困，因为例如，我不知道如何获取节点的索引！我能够确定选择中的该类是否存在跨度。但是如何删除呢？

这就是我所拥有的：

<div contentEditable='true' spellcheck='false'>
Lorem ipsum <a href='eer.htm'>dolor sit amet</a>, consectetur <span class='high'>adipiscing elit</span>. Ut lacinia eros ut orci pellentesque vulputate. Mauris sodales odio.
</div>
<br />
<button id='remove'>Remove Highlight</button>

JS：

remove.onclick = e => remove();

function nextNode(node) {
    if (node.hasChildNodes()) {
        return node.firstChild;
    } else {
        while (node && !node.nextSibling) {
            node = node.parentNode;
        }
        if (!node) {
            return null;
        }
        return node.nextSibling;
    }
}

function getRangeSelectedNodes(range) {
    var node = range.startContainer;
    var endNode = range.endContainer;
    if (node == endNode) {
        return [node];
    }
    var rangeNodes = [];
    while (node && node != endNode) {
        rangeNodes.push( node = nextNode(node) );
    }
    node = range.startContainer;
    while (node && node != range.commonAncestorContainer) {
        rangeNodes.unshift(node);
        node = node.parentNode;
    }
    return rangeNodes;
}

function getSelectedNodes() {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (!sel.isCollapsed) {
            return getRangeSelectedNodes(sel.getRangeAt(0));
        }
    }
    return [];
}

function remove() {
    var nds = getSelectedNodes();
    var i;
    for(i=0; i<=nds.length;i++) {
        if(nds[i] instanceof HTMLSpanElement) {
            if(nds[i].classList == 'high') {
                var spanText = nds[i].textContent;
            }
        }
    }
}

remove.onclick = e => remove();
    
    function nextNode(node) {
        if (node.hasChildNodes()) {
            return node.firstChild;
        } else {
            while (node && !node.nextSibling) {
                node = node.parentNode;
            }
            if (!node) {
                return null;
            }
            return node.nextSibling;
        }
    }
    
    function getRangeSelectedNodes(range) {
        var node = range.startContainer;
        var endNode = range.endContainer;
        if (node == endNode) {
            return [node];
        }
        var rangeNodes = [];
        while (node && node != endNode) {
            rangeNodes.push( node = nextNode(node) );
        }
        node = range.startContainer;
        while (node && node != range.commonAncestorContainer) {
            rangeNodes.unshift(node);
            node = node.parentNode;
        }
        return rangeNodes;
    }
    
    function getSelectedNodes() {
        if (window.getSelection) {
            var sel = window.getSelection();
            if (!sel.isCollapsed) {
                return getRangeSelectedNodes(sel.getRangeAt(0));
            }
        }
        return [];
    }
    
    function remove() {
        var nds = getSelectedNodes();
        var i;
        for(i=0; i<=nds.length;i++) {
            if(nds[i] instanceof HTMLSpanElement) {
                if(nds[i].classList == 'high') {
                    var spanText = nds[i].textContent;
                }
            }
        }
    }

.high { background:yellow; }

    <div contentEditable='true' spellcheck='false'>
    Lorem ipsum <a href='eer.htm'>dolor sit amet</a>, consectetur <span class='high'>adipiscing elit</span>. Ut lacinia eros ut orci pellentesque vulputate. Mauris sodales odio.
    </div>
    <br />
    <button id='remove'>Remove Highlight</button>

非常感谢！

Answer 1

您应该使用.classList.contains和.classList.remove。参见Element.classList。

document.getElementById("remove").onclick = e => remove();
    
    function nextNode(node) {
        if (node.hasChildNodes()) {
            return node.firstChild;
        } else {
            while (node && !node.nextSibling) {
                node = node.parentNode;
            }
            if (!node) {
                return null;
            }
            return node.nextSibling;
        }
    }
    
    function getRangeSelectedNodes(range) {
        var node = range.startContainer;
        var endNode = range.endContainer;
        if (node == endNode) {
            return [node];
        }
        var rangeNodes = [];
        while (node && node != endNode) {
            rangeNodes.push( node = nextNode(node) );
        }
        node = range.startContainer;
        while (node && node != range.commonAncestorContainer) {
            rangeNodes.unshift(node);
            node = node.parentNode;
        }
        return rangeNodes;
    }
    
    function getSelectedNodes() {
        if (window.getSelection) {
            var sel = window.getSelection();
            if (!sel.isCollapsed) {
                return getRangeSelectedNodes(sel.getRangeAt(0));
            }
        }
        return [];
    }
    
    function remove() {
        var nds = getSelectedNodes();
        var i;
        for(i=0; i<=nds.length;i++) {
            if(nds[i] instanceof HTMLSpanElement) {
                if(nds[i].classList.contains('high')) {
                        nds[i].classList.remove('high');
                    var spanText = nds[i].textContent;
                }
            }
        }
    }

.high { background:yellow; }

    <div contentEditable='true' spellcheck='false'>
    Lorem ipsum <a href='eer.htm'>dolor sit amet</a>, consectetur <span class='high'>adipiscing elit</span>. Ut lacinia eros ut orci pellentesque vulputate. Mauris sodales odio.
    </div>
    <br />
    <button id='remove'>Remove Highlight</button>

Answer 2

您的代码很长，但是，您的主要问题是此权限。您无法删除突出显示的文本。

您的Remove Highlight按钮无法执行您的remove()功能。您至少应该首先正确地定位它。如下所示。

document.querySelector('#remove').onclick = e => remove();

并添加

document.querySelector('.high').remove();

以突出显示文字

document.querySelector('#remove').onclick = e => remove();
function remove() {

    var nds = getSelectedNodes();
    var i;
    for(i=0; i<=nds.length;i++) {
        if(nds[i] instanceof HTMLSpanElement) {
            if(nds[i].classList == 'high') {
                var spanText = nds[i].textContent;
            }
        }
    }
 document.querySelector('.high').remove();
}

    
    function nextNode(node) {
        if (node.hasChildNodes()) {
            return node.firstChild;
        } else {
            while (node && !node.nextSibling) {
                node = node.parentNode;
            }
            if (!node) {
                return null;
            }
            return node.nextSibling;
        }
    }
    
    function getRangeSelectedNodes(range) {
        var node = range.startContainer;
        var endNode = range.endContainer;
        if (node == endNode) {
            return [node];
        }
        var rangeNodes = [];
        while (node && node != endNode) {
            rangeNodes.push( node = nextNode(node) );
        }
        node = range.startContainer;
        while (node && node != range.commonAncestorContainer) {
            rangeNodes.unshift(node);
            node = node.parentNode;
        }
        return rangeNodes;
    }
    
    function getSelectedNodes() {
        if (window.getSelection) {
            var sel = window.getSelection();
            if (!sel.isCollapsed) {
                return getRangeSelectedNodes(sel.getRangeAt(0));
            }
        }
        return [];
    }
    
document.querySelector('#remove').onclick = e => remove();
    function remove() {

        var nds = getSelectedNodes();
        var i;
        for(i=0; i<=nds.length;i++) {
            if(nds[i] instanceof HTMLSpanElement) {
                if(nds[i].classList == 'high') {
                    var spanText = nds[i].textContent;
                }
            }
        }
     document.querySelector('.high').remove();
    }

.high { background:yellow; }

<div contentEditable='true' spellcheck='false'>
    Lorem ipsum <a href='eer.htm'>dolor sit amet</a>, consectetur <span class='high'>adipiscing elit</span>. Ut lacinia eros ut orci pellentesque vulputate. Mauris sodales odio.
    </div>
    <br />
    <button id='remove'>Remove Highlight</button>

删除所选文本中具有特定类别的所有范围

2 个答案: