mark.js markRanges() not respecting HTML elements

Question

I'm using mark.js's markRanges() method to highlight ranges with a start position and length, however, it's not respecting HTML elements such as line break elements. The documentation notes that start positions must be specified including whitespace characters.

For example, the following HTML:

<div contenteditable="true" id="text">hi.<br><br>I'm quite well.<br></div>

When marking a range with a start 15 and length 5:

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

The word "quite" should be highlighted, however, instead it will highlight the last two letters of the world we"ll", as the markRanges() method is not counting the characters of the two proceeding <br> line break elements.

My fiddle https://jsfiddle.net/93swuqa6/

Answer 1

It is not a bug. Rather, by whitespace, they don't mean <br> tags and <p> tags. Tags don't count as whitespace. Instead, they mean actual text whitespace, newlines, spaces, and tabs, even though it is not rendered by the browser.

To take your example and tweak it a bit:

<div contenteditable="true" id="text">hi.
   I'm quite well.<br>

There is a newline character (ASCII character 13 or 10) and several spaces (ASCII character 32) between "hi." and "I'm". The browser would not show most of those spaces, but would only show a single space. Even so, "quite" is now in the 15th position, and so would be highlighted in yellow.