JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" contenteditable="true">This is a sample text</div>

JavaScript

$(function(){
  var selectedRange, selectedNode;
  $("#div1").on("keyup mouseup mousedown", function(e) {
      if (e.type == 'mousedown') {
          clearTheSelection();
      } else {
    selectedRange = window.getSelection().getRangeAt(0);
    selectedNode = selectedRange.commonAncestorContainer;
    console.log("selected node: ", selectedNode);
    console.log("selected node value: ", selectedNode.nodeValue);
    console.log("selection chars range: START POS: ", selectedRange.startOffset);
    console.log("selection chars range: END POS: ", selectedRange.endOffset);
      }
  });
});

function clearTheSelection() {
    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}