contenteditable what chlidren are selected in text range?

Question

So I have a contenteditable div with multiple child paragraphs:

<div id="editor" contenteditable="true">
    <p>Paragraph1</p>
    <p>Paragraph2</p>
    <p>Paragraph3</p>
    <p>Paragraph4</p>
</div>

So with window.getSelection() I get what text is selected, I know that if it startContainer, startOffset I can get where the range begins, and endContainer, endOffset where it ends. But if my selection streches across multiple children paragraphs, how can I tell which children are selected?

Answer 1

You could use a function like the one in the following answer and filter the array of nodes to only include <p> elements:

https://stackoverflow.com/a/7784176/96100