Nodurile dintr-un text selection

Stie cineva o modalitate rapida de a gasi toate nodurile dintr-un text selection (Range object)?

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var rangeContents = range.cloneContents(); 
var rangeNodes = rangeContents.querySelectorAll('*');

console.log(rangeNodes);
2 Likes

Merci!

Dar chiar trebuie sa clonezi inainte? Nu as vrea sa fac asta fiindca imi trebuie nodurile reale din DOM.

Hmm, codul tau intoarce un NodeList gol atunci cand textul selectat face parte dintr-un singur container (Firefox 30.0 sub Linux). Iar cand selectezi text din mai multe containere (cum ar fi din doua paragrafe), NodeList-ul e populat cu cate un <p> nou creat pentru fiecare TextNode (care contine doar textul selectat):

1: http://i.imgur.com/Kw8p8FP.png
2: http://i.imgur.com/HxAhTfJ.png

@Vilmos_Ioo cumva comportamentul asta il urmaresti?

Daca da, asta e codul. Ca sa nu clonezi node-urile, iei containerul de la care a inceput selectia si tot parcurgi din sibling in sibling pana ajungi la ala la care s-a terminat. Asta vine cu dezavantajul ca iei elementele intregi, nu doar sectiunile selectate din interiorul lor, deci daca nu asta vrei nu prea merge asta:

var selection = window.getSelection();

if (selection.rangeCount) {
    var range = selection.getRangeAt(0);
    var start = range.startContainer.parentNode;
    var end   = range.endContainer.parentNode;

    var nodes = [start];

    if (start != end) {
        var next = start.nextSibling;
        while (next && next != end) {
            /**
             * Node.nextSibling preia si newline-urile din cod ca TextNodes,
             * asa ca ignoram TextNode-urile (nodeType == 3) care contin
             * doar whitespace
             */
            if (next.nodeType == 3 && /^\s*$/.test(next.data)) {
                next = next.nextSibling;
                continue;
            }
            nodes.push(next);
            next = next.nextSibling;
        }
        nodes.push(end);
    }

    console.log(nodes);
}
3 Likes

Nice! E foarte bun codul!

cloneContents va schimba nodurile pentru a genera un DOM fragment valid. Deci nu merge :frowning: