使用 getSelected() 获取所选文本的跨度 ID答案

【问题标题】：Get span Id's of selected text using getSelected()使用 getSelected() 获取所选文本的跨度 ID
【发布时间】：2017-10-09 17:09:01
【问题描述】：

我有一个奇怪的问题。我不太清楚如何处理它。我们有一个应用程序可以输出文本段落，每个单词都包含在一个带有 ID 的 span 中。我被要求制作一个 JavaScript 来捕获用户突出显示的所有单词的 ID。

下面是一个简单的段落示例。

<span id="p-58" class="softWord" onClick="setTranscriptPosition(-58);return false"> that </span>
<span id="p177" class="softWord" onClick="setTranscriptPosition(177);return false"> quake </span>
<span id="p857" class="softWord" onClick="setTranscriptPosition(857);return false"> briefly </span>
<span id="p1697" class="softWord" onClick="setTranscriptPosition(1697);return false"> triggering </span>
<span id="p2267" class="softWord" onClick="setTranscriptPosition(2267);return false"> another </span>
<span id="p2697" class="softWord" onClick="setTranscriptPosition(2697);return false"> tsunami </span>

我知道有一种方法可以使用类似这样的方法来捕获选定的文本：（在站点 http://motyar.blogspot.com/2010/02/get-user-selected-text-with-jquery-and.html 找到此内容）

function getSelected() {
    if(window.getSelection) { return window.getSelection(); }
        else if(document.getSelection) { return document.getSelection(); }
                    else {
                            var selection = document.selection && document.selection.createRange();
                            if(selection.text) { return selection.text; }
                return false;
            }
            return false;
        }

我将如何获得这些跨度的 ID？

【问题讨论】：

我不知道setTranscriptPosition(-58) 是什么。但我认为结合 jquery mouseup 和您的 javascript 代码，您可以轻松地做到这一点。执行类似 On mouseup call getSelected() 之类的操作，如果只是单击它会返回 false，否则您可以获得跨度的 id。
我们在一个项目中正是这样做的。等一下，我正在为你过滤掉代码。

标签： javascript jquery

【解决方案1】：

好的，这将完全满足您的需求。多亏了我朋友在我们一起做的一个项目上的工作，所以功劳属于他：

http://jsfiddle.net/KC48j/11/

只需选择一些文本并点击按钮。编辑：更新后也可以与 IE 一起使用。您可以自己弄乱逻辑（它如何处理单词之间的空格取决于您）。

【讨论】：

@Milimetric：几点：在window.getSelection 分支中，您应该使用其rangeCount 属性（可以为0）检查选择是否有一些范围。此外，Firefox 允许每次选择多个范围（特别是当您在表格中选择多个单元格时会发生这种情况），因此您也应该允许这样做。看我的回答。
@Tim Down：很酷。我认为在您执行此类操作的情况下，您可以非常严格地控制 html，并且“管道胶带和字符串”编码有时比 Rangy 等强大的解决方案更好。不过很有趣，感谢您提供见解。
@Milimetric：同意，我不会总是使用像 Rangy 这样的库的重量来处理这类事情。

【解决方案2】：

如果您不介意使用库，我的Rangy library 让这变得非常简单。以下内容适用于所有主流浏览器（包括 IE 6）：

jsFiddle：http://jsfiddle.net/VC3hk/24/

代码：

function getSelectedSpanIds() {
    var sel = rangy.getSelection(), ids = [];
    for (var r = 0, range, spans; r < sel.rangeCount; ++r) {
        range = sel.getRangeAt(r);
        if (range.startContainer == range.endContainer && range.startContainer.nodeType == 3) {
            range = range.cloneRange();
            range.selectNode(range.startContainer.parentNode);
        }
        spans = range.getNodes([1], function(node) {
              return node.nodeName.toLowerCase() == "span";
        });
        for (var i = 0, len = spans.length; i < len; ++i) {
            ids.push(spans[i].id);
        }
    }
    return ids;
}

document.onkeyup = document.onmouseup = function() {
    alert(getSelectedSpanIds());
};

【讨论】：

此示例仅在选择多个单词时捕获 id。是否可以只选择一个单词并捕获其 id？
@Pankus：已更新。
非常感谢您的帮助（我印象非常深刻！）。就一个问题。为什么range = range.cloneRange();； range = sel.getRangeAt(r); 还不够吗？对不起这个问题，但这是我第一次面对这个话题
@Pankus：因为range.selectNode 改变了范围，并且在某些浏览器中（我忘记了细节），改变来自选择的范围也会改变选择。在其他浏览器中getRangeAt 返回所选范围的副本，因此无需复制它。见the spec。

【解决方案3】：

我认为你过于复杂了，只需使用 mouseup()

jquery

$('span').mouseup(function(){
    alert($(this).attr('id'));
});

在这里查看 - http://jsfiddle.net/ajthomascouk/Qdv4T/

【讨论】：

当然，除非你选择了多个 span 并且想要返回所有的 id，否则这个方法是行不通的。这是你需要的吗？
这似乎只返回一个单词的 id。