JSFiddle - React, Tailwind, and code Playground

by Joel Peterson

HTML

<div id="container">
    <p>
        Here is the first paragraph of this example.  This example will help demonstrate what the TreeWalker can do.  This is a <em>contrived</em> example.  It's purposes are the following
        <ol>
            <li>Demonstrate how it is used</li>
            <li>Provide an example for why it might be useful</li>
        </ol>
    </p>
    <p>
        This is the second paragraph.  
        <div>
            This paragraph has a nested block
        </div>
        <strong>Here is additional inline nested</strong> content
    </p>
</div>

JavaScript

document.addEventListener('mouseup', getRange, false);

function getRange() {
    var selection = window.getSelection();   
    var range = selection.getRangeAt(0);
    console.log("", range);
}