Remove any span with specific class in selected text

user_3787036 0
Viewed 242

I'm trying to remove any tag with the class "high" in any selected text of a contentEditable div.

No matters if the span node is fully selected or partially selected! Like the example:

enter image description here

In this example above, note that the span with "adipiscing elit" text is just partially selected! But when user clicks one button "remove highlight", I'm trying to make this <span> class vanish! But keep the text (remove only the tag). And if the selection has one or more spans with the class "high", all should be removed!

I'm stuck because I don't know how to get the index of the node, for example. I was able to identify if there is a span with that class in the selection. But how to do this removal?

Here is what I have:

<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>

javascript
2 Answers

You should use .classList.contains and .classList.remove. See 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>

user_95131840

You code is long but, your main issue is this right. You can't remove the highlighted text.

Your Remove Highlight button cant execute your remove() function. you should at least properly target it first. like below.

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

and add

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

to remove the text with hightlight

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>

user_131086210
Related