javascript - 如何以编程方式将网页的各个部分指示为 "selected"

Question

我正在尝试弄清楚如何让用户能够突出显示和注释 HTML 文档，用注释标记各个部分，并在屏幕上指示哪些文本已被如此标记。将其视为 Kindle 上提供的注释功能的一个非常简单的版本...用户选择一些文本，键入注释并单击“保存”，然后文档突出显示该文本以及用户拥有的所有其他文本之前选择的。 AJAX 调用可确保服务器了解该选择。

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

下一个逻辑复杂度是存储开始/结束索引列表，并在显示原始文档后使用 jQuery 将标签添加到 HTML。我可以做到这一点，但逻辑和数学有点不稳定，如果可能的话我想避免它。当用户单击提交选择时，我只需计算索引(如果文档中未选择任何其他内容)，使用 AJAX 发送索引，并将适当的跨度标记应用到标记的文档。

不会有重叠的选定区域，这样逻辑就合理了……只是感觉应该有更好的方法。有想法吗？

Answer 1

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

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

如果“sel”后面的管道字符代表插入符号，则浏览器将其位置视为“选择”文本节点中的索引 4，而不是包含段落中的 26 个左右字符，甚至可能更有用，作为其在包含文档中的索引。

由于处理起来非常痛苦，我建议使用 Tim Down 的 Rangy 库并使用 span 来突出显示内容。这是一篇关于类似要求的帖子:https://stackoverflow.com/a/5765574/3651800

简而言之，Rangy 有一个跨浏览器突出显示模块，可将跨度应用于用户选择:

var highlightApplier;

window.onload = function() {
    rangy.init();
    highlightApplier = rangy.createCssClassApplier("highlighted ", true);
};

function applyHighlight() {
    highlightApplier.applyToSelection();
}

如果您稍后想要删除文档中的所有突出显示并重新规范化它，类似这样的操作应该可以解决问题:

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");

真心希望对您有帮助。