如何在光标下获取单词? [英] How to get word under cursor?

问题描述

假设整个文档中都有一个mousestop事件，当鼠标停下时，找出光标下准确的 word 的最佳方法是什么(如果有任何文本)移动吗?

Assuming there is a mousestop event attached to the entire document, what is the best way to figure out the exact word under the cursor (if there is any text), when the mouse stops moving?

我可以从事件处理程序中获取基础(jQuery)元素-$(document.elementFromPoint(e.clientX, e.clientY))-但是接下来是什么?

I can get the underlying (jQuery) element from the event handler - $(document.elementFromPoint(e.clientX, e.clientY)) - but then what is next?

到目前为止，我的想法是将hit元素中的所有文本节点替换为其副本，其中每个单词都包裹在DOM元素中(尚不知道哪个)，然后再次调用$(document.elementFromPoint(e.clientX, e.clientY))以获得包含以下内容的元素仅鼠标下的单词.
但这似乎是一个复杂的计划，我想知道我是否缺少简单的东西.

So far my idea is to replace all text nodes within hit element with their copy where each word is wrapped in a DOM element (don't know which one yet) and then call $(document.elementFromPoint(e.clientX, e.clientY)) again to get the element that contains only the word under mouse.
But that seems like a complicated plan and I wonder whether I am missing something simpler.

推荐答案

好吧，到目前为止，还没有魔术，所以这是一个枯燥无味的解决方案(但仍在起作用):

Well, no magic tricks so far, so here is the dull boring (and yet working) solution:

  $(document.body).mousemove(function(e){

    var onmousestop = function() {
      function getHitWord(hit_elem) {
        var hit_word = '';
        hit_elem = $(hit_elem);

        //text contents of hit element
        var text_nodes = hit_elem.contents().filter(function(){
          return this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/[a-zA-Z]{2,}/)
        });

        //bunch of text under cursor? break it into words
        if (text_nodes.length > 0) {
          var original_content = hit_elem.clone();

          //wrap every word in every node in a dom element
          text_nodes.replaceWith(function(i) {
            return $(this).text().replace(/([a-zA-Z-]*)/g, "<word>$1</word>")
          });

          //get the exact word under cursor
          var hit_word_elem = document.elementFromPoint(e.clientX, e.clientY);

          if (hit_word_elem.nodeName != 'WORD') {
            console.log("missed!");
          }
          else  {
            hit_word = $(hit_word_elem).text();
            console.log("got it: "+hit_word);
          }

          hit_elem.replaceWith(original_content);
        }

        return hit_word;
      }

      var hit_word = getHitWord(document.elementFromPoint(e.clientX, e.clientY));
      ...
    }
  }

所涉及的其他细节很少(例如事件降噪"，保持替换的dom背景(例如选择)等等)，但是您明白了.

There are few other subtleties involved (like event 'noise reduction', keeping replaced dom context (such as selection) and so forth), but you get the idea.

Here you can learn how set up mousestop event.

在IE中(可能会想到?)，使自定义html元素可能不是那么困难.在此处中查看更多

Making custom html elements may not be that strait forward in IE (who would have thought?). Check out more here.

这篇关于如何在光标下获取单词?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！