JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <title>Example</title>
  </head>
  <body>
    <div contenteditable="true" id="text">hi.<br><br>I'm quite well.<br></div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script>
</html>

CSS

/* it's not counting HTML characters */
/* Note that the start positions must be specified including whitespace characters. */

JavaScript

var elem = document.getElementById('text');
var instance = new Mark(elem);
var options = {
  "element": "mark"
};
instance.markRanges([{
  start: 15,
  length: 5
}], options);