Javascript 如何以编程方式将网页的各个部分指示为；精选；

我试图弄清楚如何让用户能够突出显示和注释HTML文档，用注释标记部分，并在屏幕上指示标记了哪些文本。可以把它看作是Kindle上提供的注释功能的一个非常简单的版本。。。用户选择一些文本，键入注释并单击“保存”，然后文档将突出显示该文本以及用户以前选择的所有其他文本。AJAX调用确保服务器知道选择

简单的实现似乎是在文档中插入span标记，将类应用于用户选择的每个部分。这意味着文档将随着时间的推移而增长，尽管我怀疑差异是否显著（可能每页8-10个选项）。这并不理想，因为我不想存储整个文档，我只想发送/存储每个选定区域的起始和结束字符索引（或类似内容）

下一个逻辑复杂性级别是存储开始/结束索引列表，并在显示原始文档后使用jQuery将标记添加到HTML中。我可以这样做，但是逻辑和数学有点不可靠，如果可能的话，我想避免它。当用户单击提交选择时，我只计算索引，就像在文档中没有选择其他内容时一样，使用AJAX发送索引，并对标记的文档应用适当的span标记

---

不会有重叠的选定区域，以便保持逻辑合理。。。只是觉得应该有更好的办法。想法？

处理选择可能会非常痛苦，因为浏览器会将所有选择视为相对于封闭节点而不是文档，例如：

<p>An example <span>illustrating</span> sel|ections</p>
   01234567890      012345678901       012345678901

如果以后要从文档中删除所有高光并对其进行重新规范化，类似这样的操作应该可以做到：

function unwrap(root, tagname) {    
    var elements = root.getElementsByTagName(tagname);
    var len = elements.length;
    var i;
    for( i=len-1; i >= 0; i--) {
        // work backwards to avoid complications with nested spans
        while(elements[i].firstChild) {
            elements[i].parentNode.insertBefore(elements[i].firstChild, elements[i]);            
        }
        var parent = elements[i].parentNode;
        parent.removeChild(elements[i]);
        parent.normalize(); 
    }
}

并称之为：

unwrap(rootElement, "span");

---

真的希望这能对您有所帮助。

对我来说，这听起来是最好的解决方案。。。如果两个单独的数据集不同步，保存一个单独的字符索引列表可能会出现可怕的错误。。。

unwrap(rootElement, "span");