Question

我有一个奇怪的问题。我不太清楚如何处理它。我们有一个应用程序，它会发出文本段落，每个单词都包含在带有ID的范围内。我被要求制作一个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？

Answer 1

如果您不介意使用库，我的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());
};

Answer 2

好的，这将完全符合您的需求。这要归功于我朋友在我们共同完成的项目上所做的工作，所以归功于他：

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

只需选择一些文字并按下按钮即可。 EDIT ：已更新为与IE合作。你可以自己搞乱逻辑（如何处理单词之间的空格）。

Answer 3

我认为你过度复杂，只需使用mouseup（）

<强> jquery的

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

请在此处查看 - http://jsfiddle.net/ajthomascouk/Qdv4T/

使用getSelected（）获取所选文本的跨度ID

3 个答案: