使用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?
好的,这将完全符合您的需求。 这要归功于我朋友在我们共同完成的项目上的工作,所以归功于他:
只需选择一些文字并点击按钮即可。 编辑 :更新也与IE一起工作。 你可以自己搞乱逻辑(它如何处理单词之间的空格取决于你)。
如果您不介意使用库,我的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()); };
我认为你过度复杂,只需使用mouseup()
jQuery的
$('span').mouseup(function(){ alert($(this).attr('id')); });