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

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

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

 that   quake   briefly   triggering   another   tsunami  

我知道有一种方法可以使用以下内容捕获所选文本:(在网站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

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

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

只需选择一些文字并点击按钮即可。 编辑 ：更新也与IE一起工作。 你可以自己搞乱逻辑（它如何处理单词之间的空格取决于你）。

Answer 2

如果您不介意使用库，我的Rangy库使这非常简单。 以下内容适用于所有主流浏览器（包括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 3

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

jQuery的

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

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