Валидация HTML в строке

Имеется html документ с рандомным наполнением Имеется апишка которая находит орфографические ошибки в этом документе. Я получаю эти ошибки о оборачиваю их в тег с border-bottom

Если ошибка будет без каких-либо стилей, то это просто

<span style='border-bottom: 1px solid red'>SomeText</span>

Здесь проблем нет. Но если выделяемый текст имеет стили, то могут получиться следующие ситуации:

...<span class='c1'>pre text<span style='border-bottom: 1px solid red'>Some</span>Text</span>

или

<span style='border-bottom: 1px solid red'>Some<span class='c2'>Text</span> next text</span>

Нужно сделать так, чтобы закрывающиеся теги помещались до выделения, а открывающиеся - после, при этом все теги, которые умещаются внутри выделения - оставались там