JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   <!-- Example from: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.setSelectionRange -->
  <p><input type="text" id="mytextbox" size="20" value="Mozilla"/></p>
  <p><button onclick="SelectInput()">Select Above (works)</button></p>
  <p><button onclick="SelectEditable()">Select Below (doesn't work)</button></p>


<h2 id="contentEdit">some_text_new</h2>

<p><button onclick="OtherTest()">Try more (doesn't work)</button></p>


</body>

JavaScript

SelectInput = function () {     
        var input = document.getElementById("mytextbox");
            input.focus();
            input.setSelectionRange(2,5);         
} 
SelectEditable = function () {     
        var input = document.getElementById("contentEdit");
            input.focus();
            input.setSelectionRange(10,15);         
} 
$("#contentEdit").attr('contentEditable', true).focus();

OtherTest = function(){
    $("#contentEdit").attr('contentEditable', true).focus();
    var elem = document.getElementById("contentEdit");
    var range = document.createRange();
    range.setStart(elem, 5) // selects all when I remove these
    range.setEnd(elem, 8)   // selects all when I remove these
    // range.setSelectionRange(5, 9); // also does not work
    range.selectNodeContents(elem);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}