Javascript 保存用户在多个（句子）对象上突出显示文本

假设我有一个文本，看起来像这样：

<span> Some sentence in which a fox jumps over some fence. </span>
<span> Another sentence in which a dog jumps over some fox. </span>
<span> Yet another one, I think you get the idea. </span>

狐狸跳过篱笆的句子。
另一句话，一只狗跳过狐狸。
还有一个，我想你明白了。

假设用户现在选择跨越两个

项目的文本位，然后按下按钮突出显示或加粗选择。对于用户来说，它将如下所示：

<span> Some sentence in which a fox jumps over some fence. </span>
<span> Another sentence in which a dog jumps over some fox. </span>
<span> Yet another one, I think you get the idea. </span>

狐狸跳过篱笆的句子。另一句话 一只狗跳过一只狐狸。还有一个，我想你 明白了

我想知道我怎样才能保存这样的东西。我通过迭代一个数组来创建这些跨距，该数组会吐出句子，但是我怎么能记得a高亮显示跨距超过两个句子，并且是一个单独的高亮显示呢（我这样说是因为我当然可以以某种方式保存第2句的结尾和第3句的开头是突出显示的，但这会将突出显示视为单独的）

---

顺便说一句，我在这里使用React。

您可以获得用户突出显示的字符，无论这些字符分配在哪里

下面是一个关于如何使用纯javascript的示例：

所选函数（）{
if（window.getSelection）{
return window.getSelection（）.toString（）
}else if（文档选择）{
返回document.selection.createRange（）.text
}
}
函数boldify（txt）{
var ls=txt.split（“”）
$。每个（$（'span'），函数（k，v）{
var currentText=$（v）.text（）
currentText=粗体字（ls，currentText）
$（v）.html（当前文本）
}); 
}
函数粗体字（ls，文本）{
$。每个（ls，函数（k，v）{
console.log（'v'，v）
文本=文本。替换（v，“+v+”）
});
返回文本
}
函数saveHighlight（txt）{
console.log（'Save'）
}
//此辅助变量将保存所有跨度
//用户与交互（您可以传递此消息以获取el）
//类名
var interactivedspan=[]
//我说的是纯js，对jQuery很抱歉，只是为了更快
$（'span'）.mouseup（函数（）{
interactedSpan.push（this.className）
var myText=selected（）
保存突出显示（myText）
加粗（myText）
console.log（'interactedSpan:'，interactedSpan）
});
$（'span'）.mousedown（函数（）{
interactedSpan.push（this.className）
})

狐狸跳过篱笆的句子。
另一句话，一只狗跳过狐狸。
还有一个，我想你明白了。

你可以有两个单独的粗体标记，这样你就可以有一个有效的HTML，这是你提到的显而易见的解决方案。问题是，你是否有任何不适合这个解决方案的要求，比如在每个突出显示周围有一个边框

狐狸跳过篱笆的句子。
另一句话，一只狗跳过狐狸。
还有一个，我想你明白了。