How to get nodes lying inside a range with javascript?

Question

I\'m trying to get all the DOM nodes that are within a range object, what\'s the best way to do this?

var selection = window.getSelection(); //what the user          


        

Answer 1

I wrote the perfect code for this and it works 100% for every node :

function getNodesInSelection() {
    
var range = window.getSelection().getRangeAt(0);
var node = range.startContainer;

var ranges = []
var nodes = []
        
while (node != null) {        
    
    var r = document.createRange();
    r.selectNode(node)
    
    if(node == range.startContainer){
        r.setStart(node, range.startOffset)
    }
    
    if(node == range.endContainer){
        r.setEnd(node, range.endOffset)
    }
    
    
    ranges.push(r)
    nodes.push(node)
    
    node = getNextElementInRange(node, range)
}
     
// do what you want with ranges and nodes
}

here are some helper functions

function getClosestUncle(node) {

var parent = node.parentElement;

while (parent != null) {
    var uncle = parent.nextSibling;
    if (uncle != null) {
        return uncle;
    }
    
    uncle = parent.nextElementSibling;
    if (uncle != null) {
        return uncle;
    }
    
    parent = parent.parentElement
}

return null
}
 

                    
function getFirstChild(_node) {

var deep = _node

while (deep.firstChild != null) {
    
    deep = deep.firstChild
}

return deep
}
  

                    
function getNextElementInRange(currentNode, range) {

var sib = currentNode.nextSibling;

if (sib != null && range.intersectsNode(sib)) {
    return getFirstChild(sib)
}
        
var sibEl = currentNode.nextSiblingElemnent;

if (sibEl != null && range.intersectsNode(sibEl)) {
    return getFirstChild(sibEl)
}

var uncle = getClosestUncle(currentNode);
var nephew = getFirstChild(uncle)

if (nephew != null && range.intersectsNode(nephew)) {
    return nephew
}

return null
}