Question

我正在尝试构建一个允许人们获取单词或短语（在选择中）的工具，选择部分已完成，但不是单词部分。

当有人点击某个单词时，我需要能够获取当前单词，我找到了这个解决方案

get word click in paragraphs

遗憾的是，此代码更改了所有单词并为每个单词添加了<span>，这导致了我的问题，因为我无法在文本中添加html标记（css文件可以导入或动态添加）< / p> 如果可能，有没有更好的方法来实现这一目标？

EX：

Lorem ipsum dolor坐下来，精神上的精神。 Donec auctor ante nmetl consequat volutpat。

如果我点击“坐”，那么我会提醒'坐'

Answer 1

嗯，对于您的解决方案，您需要使用selections和doubleclick事件作为棘手的事情，并通过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();
    });

});

希望这会有所帮助： - ）

Answer 2

Oscar Jara's answer（上图）说，如果您不想引入新标签，没有其他方式 [返回点击的字词] 。< / em> 2012年可能是这样，但目前我们有getSelection：

DocumentOrShadowRoot接口的getSelection（）属性返回一个Selection对象，表示所选文本的范围用户，或者插入符号的当前位置。

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

window.getSelection();

涉及getSelection的相关SO问题：

Get a word by single click

Detect which word has been clicked on within a text

Return Sentence That A Clicked Word Appears In

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

2 个答案: