JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-textrange.js"></script>
<div contenteditable="true" id="editable">One two three <span>four</span> five six seven</div>
<div id="info"></div>

JavaScript

var editableDiv = document.getElementById("editable");

editableDiv.onmouseup = function() {
    var sel = rangy.getSelection();
    var selRange = sel.getRangeAt(0);
    var originalCharRange = selRange.toCharacterRange(editableDiv);
    selRange.expand("word");
    var expandedCharRange = selRange.toCharacterRange(editableDiv);
    
    document.getElementById("info").innerHTML = "Selection character range: " +
        originalCharRange.start + " to " + originalCharRange.end +
        "<br>Word character range: " + expandedCharRange.start +
        " to " + expandedCharRange.end;
};