Javascript 角度html中的颜色字符串，当提供一个偏移数组和一对具有重叠的着色位置的长度对时

也就是说，下面的字符串“violation buffer”需要在html中应用着色

[
{ offsetFromStart : 3, length : 3},
{ offsetFromStart : 2, length : 6},
{ offsetFromStart : 4, length : 7},
{ offsetFromStart : 13, length : 3},
]

因此，理想的效果是

 v<span style="background-color:green">i<span style="background-color:red;">ola</span>tion bu</span>f<span style="background-color:blue">fe</span>r

冲突缓冲区

JS中实现这种效果的最佳方法是什么？

---

我考虑过使用一些二叉树，然后连接成一个字符串，但不知道怎么做。

也许我错过了一些东西，但是想要的效果是什么？应该是字符串中的spans标记，违例buffer@Badacadabra你怎么认为？