Alle DOM-Blockelemente für ausgewählte Texte abrufen

Question

Bei der Auswahl von Texten in HTML-Dokumenten kann von einem DOM-Element zu einem anderen Element übergegangen werden, wobei möglicherweise mehrere andere Elemente auf dem Weg übergeben werden. Mit der DOM-API ist es möglich, den Bereich der Auswahl, die ausgewählten Texte und sogar das Elternelement aller ausgewählten DOM-Elemente zu erhalten (mit commonAncestorContainer oder parentElement() basierend auf dem verwendeten Browser). Ich bin mir jedoch nicht bewusst, dass alle Elemente, die Elemente der ausgewählten Texte enthalten, aufgelistet werden können, außer dass das einzige übergeordnete Element abgerufen wird, das alle Elemente enthält. Das Verwenden der Eltern und Durchlaufen der Kinderknoten wird es nicht tun, da es möglicherweise andere Geschwister gibt, die in diesem Elternelement nicht ausgewählt werden.

Also, gibt es eine Möglichkeit, dass ich alle diese Elemente, die die ausgewählten Texte enthält, bekommen kann. Ich bin hauptsächlich daran interessiert, die Blockelemente zu erhalten (p, h1, h2, h3, ... etc), aber ich glaube, wenn es einen Weg gibt, alle Elemente zu bekommen, dann kann ich sie durchgehen und sie filtern, um das zu bekommen, was ich wollen. Ich freue mich über Ideen und Anregungen.

Vielen Dank.

Answer 1

Key ist window.getSelection().getRangeAt(0)https://developer.mozilla.org/en/DOM/range

Hier einige Beispiel-Code, die Sie mit spielen können, zu tun, was Sie wollen. Erwähnen Sie, was Sie wirklich in Frage wünschen, wird Menschen helfen, bessere Antworten zu geben.

var selection = window.getSelection(); 
var range = selection.getRangeAt(0); 
var allWithinRangeParent = range.commonAncestorContainer.getElementsByTagName("*"); 

var allSelected = []; 
for (var i=0, el; el = allWithinRangeParent[i]; i++) { 
    // The second parameter says to include the element 
    // even if it's not fully selected 
    if (selection.containsNode(el, true)) { 
    allSelected.push(el); 
    } 
} 


console.log('All selected =', allSelected); 

Dies ist nicht die effizienteste Art und Weise, können Sie den DOM selbst mit der startContainer/endContainer der Strecke durchqueren, zusammen mit nextSibling/previousSibling und childnodes.

Answer 2

Es klingt, als könnten Sie Traversing from the jQuery API verwenden.

Möglicherweise .contents()

Hoffnung, das hilft!

Answer 3

Sie können meine Rangy library verwenden, um dies zu tun. Es bietet eine Implementierung von DOM Range and Selection-Objekten für alle Browser, einschließlich IE, und verfügt über zusätzliche Range-Methoden. Eines davon ist getNodes():

function isBlockElement(el) { 
    // You may want to add a more complete list of block level element 
    // names on the next line 
    return /h[1-6]|div|p/i.test(el.tagName); 
} 

var sel = rangy.getSelection(); 
if (sel.rangeCount) { 
    var range = sel.getRangeAt(0); 
    var blockElements = range.getNodes([1], isBlockElement); 
    console.log(blockElements); 
}