Javascript 以谷歌文档的方式评论html文档

我正在寻找一个想法，如何实现对HTML文档的评论，就像谷歌文档对文本的评论一样

我正在从后端加载HTML并将其嵌入到网页中

我正在考虑向HTML添加一些标记，但不能保证这些标记不会从HTML文档中破坏任何其他标记对

例如

这里有一些html

在此示例中，

mycustomtag

open标记位于

p

open和close标记之间，因此会断开

p

标记对

---

第一个想法：您需要为HTML提供一些清单，例如Json文件，其中包含消息列表，对于每条消息，您可以指定

selectedText（字符索引）

的开头和

length（所选文本的长度）

嗯，它的结构不是这样的。这种结构的原因是什么？原因是use可以选择任何范围的html文档并将其标记为注释。而且也不能保证它是html中结构良好的一部分。您使用的是香草javascript、jquery还是其他库？我使用的是ReactJS。我认为在这种情况下这无关紧要。主要的问题是如何显示这些突出显示并保持HTML的一致性？如果您将元数据放在单独的文件中，您不会破坏HTML文件，它将始终处于后端状态。所以，您不需要只从后端获取HTML，而需要获取两个：HTML和元数据文件。在获得它们之后，您需要编写自定义代码（或使用一些js库）将注释添加到原始HTML之上的视图中