检测在文本中单击了哪个词

Question

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

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

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

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

一个可能的 owrkaround 是让用户突出显示单词而不是单击它，但我真的很想能够通过单击实现同样的事情！

原文由 Cystack 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个无需向文档添加大量跨度的解决方案（适用于 Webkit、Mozilla 和 IE9+）：

https://jsfiddle.net/Vap7C/15/

     $(".clickable").click(function(e){
         s = window.getSelection();
         var range = s.getRangeAt(0);
         var node = s.anchorNode;

         // Find starting point
         while(range.toString().indexOf(' ') != 0) {
            range.setStart(node,(range.startOffset -1));
         }
         range.setStart(node, range.startOffset +1);

         // Find ending point
         do{
           range.setEnd(node,range.endOffset + 1);

        }while(range.toString().indexOf(' ') == -1 && range.toString().trim() != '');

        // Alert result
        var str = range.toString().trim();
        alert(str);
       });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="clickable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
</p>

在 IE8 中，由于 getSelection 而出现问题。此链接（ Is there a cross-browser solution for getSelection()? ）可能有助于解决这些问题。我还没有在 Opera 上测试过。

我使用来自类似问题的 https://jsfiddle.net/Vap7C/1/ 作为起点。它使用了 Selection.modify 函数：

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

不幸的是，他们并不总能得到全部信息。作为解决方法，我获得了选择 范围 并添加了两个循环来查找单词边界。第一个不断向单词添加字符，直到它到达一个空格。第二个循环走到单词的末尾，直到它到达一个空格。

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

原文由 stevendaniels 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

据我所知，为每个单词添加 span 是唯一的方法。

您可能会考虑使用 Lettering.js ，它会为您处理 拆分。尽管这不会真正影响性能，除非您的“拆分代码”效率低下。

Then, instead of binding .click() to every span , it would be more efficient to bind a single .click() to the container of the span s，并检查 event.target 以查看单击了哪个 span 。

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议