There are libraries that can add highlights to existing markup. Because HTML does not allow for overlapping elements, for example V<a>W<b>X</a>Y</b>Z
, these libraries split inline elements across boundaries, nesting part of overlapping portion under a sibling element. The previous example would be split as V<a>W</a><b><a>X</a>Y</b>Z
. Note the <b><a>X</a>…
designates the leftover portion of a
that overlaps with b
.
The objective here is to be able to render the content and the higlights in one pass. Rather than modifying the rendered content in situ in with highlights in a second pass, render the content and the highlights in a single pass. This is how you’d do it in React, for example.