如何获取光标下的单词？

Posted 2023-03-04

【中文标题】如何获取光标下的单词？

【英文标题】：How to get word under cursor?

【发布时间】：2011-04-20 19:09:10

【问题描述】：

假设有一个 mousestop 事件附加到整个文档，当鼠标停止时，找出光标下确切的 单词 的最佳方法是什么（如果有任何文本）搬家？

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

到目前为止，我的想法是用它们的副本替换命中元素中的所有文本节点，其中每个单词都包含在一个 DOM 元素中（还不知道是哪个），然后再次调用 $(document.elementFromPoint(e.clientX, e.clientY)) 以获取包含的元素只有鼠标下的单词。 但这似乎是一个复杂的计划，我想知道我是否遗漏了一些更简单的东西。

【问题讨论】：

[ 另一个问题 ](***.com/questions/2444430/…) 的答案基本上按照您在问题中的建议进行......他们只是将每个单词包装在自己的元素中，并且从那里开始并不太难...... - 在保留现有文本样式的同时如何做到这一点存在问题。

@Peter：样式问题有一个非常巧妙的解决方案——组成你自己的元素。

【参考方案1】：

我没有任何代码给你，但也许这可能有点帮助：

光标空闲时，获取坐标 在上述坐标处搜索页面内的元素 使用类似var s = getElementById('ElementIDFoundinStepAbove').innerhtml;

这似乎是一个相当合乎逻辑的方法，但是，我不知道这是否可能。

---

编辑：

我刚刚在 S/O 上找到了这篇文章：

2444430

我希望这会有所帮助。

:)

杰森

【讨论】：

+1 该线程看起来是最好的选择，只是想引起人们的注意，因为它在答案中并不突出

@bemace：除了它重复了问题中已经建议的内容

【参考方案2】：

嗯，到目前为止还没有魔术，所以这是一个无聊（但有效）的解决方案：

  $(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 上下文（例如选择）等），但您明白了。

Here你可以学习如何设置mousestop事件。

编辑：

在 IE 中制作自定义 html 元素可能不是那么困难（谁会想到？）。查看更多here。

【讨论】：

我尝试事先将每个文本元素包装在 标签中，但这会导致 iPhone 3GS 的性能不佳（文本过多）。因此，我尝试使用您的技术在命中测试时暂时用标签替换单词...