web-dev-qa-db-fra.com

Comment puis-je obtenir l'élément DOM qui contient la sélection actuelle?

Vous pouvez sélectionner une partie d'une page Web avec la souris.

Je sais que je peux obtenir le texte actuellement sélectionné mais comment puis-je obtenir l'élément DOM qui contient le début ou la fin de la sélection actuelle?

34
Aaron Digulla

Ce qui suit retournera le conteneur élément de la limite de démarrage ou de fin de la sélection actuelle, à l'aide de la Boolean isStart pour spécifier si vous souhaitez que la limite de démarrage ou de fin. Cela fonctionnera dans la plupart des navigateurs traditionnels. Ajouter des tests de fonctionnalité pour plus de robustesse.

function getSelectionBoundaryElement(isStart) {
    var range, sel, container;
    if (document.selection) {
        range = document.selection.createRange();
        range.collapse(isStart);
        return range.parentElement();
    } else {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
       }

        if (range) {
           container = range[isStart ? "startContainer" : "endContainer"];

           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}
57
Tim Down