javascript - 在多个(句子)对象上保存用户突出显示的文本

Question

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

<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. Another sentence in which a dog jumps over some fox. Yet another one, I think you get the idea.

我想知道如何保存这样的东西。我通过遍历一个吐出句子的数组来创建这些跨度，但是我怎么会记得一个高亮跨越两个句子并且是一个高亮(我这样说是因为我当然可以以某种方式保存句子 2 的末尾和句子 3 的开头被突出显示，但这会将突出显示视为分开的)？

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

Answer 1

您可以只使用两个单独的粗体标记，这样您就可以获得有效的 HTML，这是您提到的显而易见的解决方案。问题是您是否有任何要求不适用于此解决方案，例如在每个突出显示周围设置边框？

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

或者您可以避免将每个句子都放在一个不会增加任何值(value)的范围内的想法。取而代之的是将句子中的开始和结束标记保持在数组中，然后将它们连接起来并显示为一个段落。开始和结束标记不必是 <b>但您选择的任何标记。

const array = ["Some sentence in which a fox jumps over some fence.",
"Another sentence in which a dog jumps <b>over some fox.",
"Yet another one, </b>I think you get the idea."];

const p = document.createElement('p');
p.innerHTML = array.join('<br>');
document.body.append(p);