如何让用户在文本中选择范围

How can I get the user to select a range in text?

本文关键字：选择 范围 文本 用户      更新时间：2023-09-26

假设我正在制作一个像维基百科这样的网站，用户可以将[需要引用]放在他们认为需要引用的文本上。我的基本解决方案是将每个句子都变成一个链接，当点击时，它会在它后面加上一个[需要引用]。

但我不喜欢这种解决方案，因为它适用于句子级别。如果用户想要[引用需要]多个句子，或者可能是句子的一部分，它将不起作用。所以我在想，如果我能让用户选择一个任意范围，就像他们在普通文本编辑器中所做的那样，那就太酷了。

我有一个额外的约束：用户无法编辑文本。我甚至不能让他们认为他们可以编辑文本，所以我宁愿避免，如果可以的话。这很奇怪，我知道。

我想这是可能的，因为谷歌文档做到了，但我不确定。这可能吗？是否可以在文本区域之外？我在这里有什么选择？

谢谢！

您可以设置如下格式（如果您允许编辑）：

这是我的段落。[包含近 100 个字符][需要引用]。

所以方括号将代表这个范围需要引用。

或者，您可以获取用户选择的文本并相应地设置其格式，如下所示：

请参阅此处了解工作 jsFiddle 

function getSelectionText() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

取自 Tim Down 的代码：从用户选择的文本返回 HTML

相关文章：