JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

<div id="mydiv" contenteditable="true">
        <p>Lorem ipsum</p>
        <p>
            dolor sit amet,
            consectetur adipiscing elit.
        </p>
        <i>
            Sed eget
            <mark>
                libero
                <b>
                    sit
                </b>
            </mark>
            amet and peekabo</i> magna sagittis</b> sagittis quis nec risus.
        </i>
        <p>
            Pellentesque feugiat pharetra purus id pharetra.
        </p>
    </div>
    
    <button onClick='doSearch()'>
      Find
    </button>

CSS

#mydiv {
  height:50vw;  
  border:solid 1px grey;
  padding:10px;
  margin:10px;
}

JavaScript

function doFindStringAndMoveCaret(editor, findTx) {
  var _NODE_TYPE_TEXT=3;
  treeObject = {}
  var element = editor;
  editor.focus();

  function doTreeWalk(element, object) {
    var nodeList = element.childNodes;
    if (nodeList != null) {
      if (nodeList.length) {
        object[element.nodeName] = []; 
        for (var i = 0; i < nodeList.length; i++) {

          if (nodeList[i].nodeType == _NODE_TYPE_TEXT) {
            var p=nodeList[i].nodeValue.indexOf(findTx);
            if ( p!=-1 ) {
              var sel=window.getSelection();
              var range=sel.getRangeAt(0);
              range.setStart(nodeList[i], p);
              range.setEnd(nodeList[i], p+findTx.length);
              return;
            }
          }
          else {
            object[element.nodeName].push({});
            doTreeWalk(nodeList[i], object[element.nodeName][object[element.nodeName].length - 1]);
          }
        }
      }
    }
  }
  doTreeWalk(element, treeObject);
  return;
}
// --------------------------------------------------------------------        
function doSearch() {
  doFindStringAndMoveCaret(document.getElementById('mydiv'), "peekabo");
}