获取有关jquery中单击事件的段落中的当前单词

我正在尝试构建一个工具,允许人们获取单词或短语(在选择上),选择部分已完成,但不是单词部分。

当有人点击一个单词时,我需要能够得到当前的单词,我找到了这个解决方案

得到单词点击段落

不幸的是,这段代码改变了所有的单词并为每个单词添加了 ,这导致了我的问题,因为我无法在文本中添加html标签(css文件可以导入或动态添加)

如果可能的话,是否有更好的方法来实现这一目标?

EX:

Lorem ipsum dolor坐着,精神上的精神。 Donec auctor ante坐在amet nisl consequat volutpat。

如果我点击“坐”,那么我会提醒’坐’

那么,对于您的解决方案,您将需要使用selectionsdoubleclick事件作为一个棘手的事情,并通过doubleclick事件获取生成的范围中的选定单词。

如果您不想引入新标签,则没有其他办法。


试试这个:

现场演示: http //jsfiddle.net/oscarj24/5D4d3/

 $(document).ready(function() { /* set hand cursor to let know the user that this area is clickable */ var p = $('p'); p.css({ cursor: 'pointer' }); /* doubleclick event working with ranges */ p.dblclick(function(e) { var selection = window.getSelection() || document.getSelection() || document.selection.createRange(); var word = $.trim(selection.toString()); if(word != '') { alert(word); } /* use this if firefox: selection.collapse(selection.anchorNode, selection.anchorOffset); */ selection.collapse(); e.stopPropagation(); }); });​ 

希望这可以帮助 :-)

Oscar Jara的回答 (上图)说, 如果你不想引入新的标签没有别的办法 [返回点击的单词] 这在2012年可能是真的,但目前我们已经获得了选择:

DocumentOrShadowRoot接口的getSelection()属性返回一个Selection对象,表示用户选择的文本范围或插入符的当前位置。

我在Windows Chrome 63.0.3239.84和Windows Firefox 56.0下工作。 要使用其他浏览器进行测试,请使用此jsfiddle示例进行测试

  window.getSelection(); 

涉及getSelection的相关SO问题:

单击即可获得一个单词

检测文本中单击的单词

单击词出现的返回句子