检测文本中单击了哪个词

小编典典

检测文本中单击了哪个词

javascript

我正在构建一个JS脚本，该脚本有时可以在给定页面上允许用户单击任何单词并将该单词存储在变量中。

我有一个非常丑陋的解决方案，涉及到使用jQuery进行类解析：首先解析整个html，拆分每个空间中的所有内容" "，然后重新附加包装在中的所有内容<span class="word">word</span>，然后添加带有jQ的事件以检测点击这样的类，并使用$（this）.innerHTML获得点击的单词。

这在许多方面都是缓慢而丑陋的，我希望有人知道实现这一目标的另一种方法。

PS：我可能会考虑将其作为浏览器扩展运行，因此，如果仅使用JS听起来是不可能的，并且如果您知道允许这样做的浏览器API，请随时提及！

可能的解决方法是让用户突出显示该单词而不是单击它，但是我真的很希望能够仅单击一下就可以实现相同的目的！

阅读 437

2020-05-01

共1个答案

小编典典

这是一个无需在文档中添加大量跨度即可使用的解决方案（适用于Webkit，Mozilla和IE9 +）：

<p class="clickable">some words</p>

$(".clickable").click(function(e) {
    s = window.getSelection();
    var range = s.getRangeAt(0);
    var node = s.anchorNode;
    while (range.toString().indexOf(' ') != 0) {
        range.setStart(node, (range.startOffset - 1));
    }
    range.setStart(node, range.startOffset + 1);
    do {
        range.setEnd(node, range.endOffset + 1);

    } while (range.toString().indexOf(' ') == -1 && range.toString().trim() != '' && range.endOffset < node.length);
    var str = range.toString().trim();
    alert(str);
});

在IE8中，由于存在getSelection，因此出现了问题。该链接getSelection（）是否有跨浏览器的解决方案？可能有助于解决这些问题。我还没有在Opera上测试过。

s.modify('extend','forward','word');
s.modify('extend','backward','word');

不幸的是，他们并不总能理解整个词。作为一种解决方法，我得到了Range进行选择，并添加了两个循环以查找单词边界。第一个一直在单词中添加字符，直到到达空格为止。第二个循环到达单词的末尾，直到到达一个空格。

这也会在单词的末尾出现标点符号，因此请确保在需要时将其删除。

2020-05-01