The highlight will have a loss if the range is in the middle of an anchor tag

[sillycube]

I tried to highlight a text till the middle of an anchor text by calling var removeHighlights = highlightRange(range). After that, I call removeHighlights(). The highlight will be removed. Then I called removeHighlights = highlightRange(range) again. The new highlight cannot reach the middle of anchor text.

Is it because of the DOM change? I can see your note for Range:

Note that as highlighting modifies the DOM, the range may be unusable afterwards

Are there any ways to preserve the highlight as intact?

[Treora]

Thanks for reporting. This happens indeed because calling highlightRange may make the given range unusable (because we modify the nodes that range points to).

Before version 3 of highlight-range, it did a simple attempt at keeping the range intact, which may keep it valid in some cases but not others.

I am not sure how we could reliably keep the range intact, and decided to not even try for now, and just consider a range ‘consumed’ once it has been highlighted. I would be great to have this work though, so it seems good to keep this issue open.

[sillycube]

I was prototyping for a widget which can toggle between highlight and non-highlight mode. Your script helps me a lot! After a while, I realized that I could change the background color of the highlighted elements between yellow and transparent instead of using ranges. So this is not a big issue for me now