如何获取光标下的单词？

Question

假设整个文档都附加了一个“mousestop”事件，当鼠标停止移动时，如何找出光标下的确切单词（如果有文本）？

我可以从事件处理程序中获取基础（jQuery）元素 - $(document.elementFromPoint(e.clientX, e.clientY)) - 但接下来该怎么做呢？

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

- artemave

---

从另一个问题的答案基本上做了你在问题中建议的事情...他们只是将每个单词包装在自己的元素中，然后从那里开始并不太难... - 在保留文本现有样式的同时如何实现这一点存在问题。 - Peter Ajtai

@Peter：对于样式问题有一个非常巧妙的解决方案——自定义元素。 - artemave

Answer 1

目前为止还没有什么魔法技巧可用，所以这里提供一种单调乏味（但有效的）解决方案：

  $(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上下文（如选择）等），但您已经有了想法。

这里可以学习如何设置鼠标停止事件。

编辑：

在IE中创建自定义HTML元素可能并不那么简单（谁能想到呢？）。在这里查看更多信息。

- artemave

---

我之前尝试将每个文本元素预先包装在<word></word>标签中，但这会导致iPhone 3GS（有大量文本）性能不佳。因此，我现在尝试使用您的技术，在命中测试时临时替换单词与标签... - Rick Love

Answer 2

很抱歉，我没有任何代码可以提供给你，但或许以下内容能够帮到你：

1. 当光标处于空闲状态时，获取坐标
2. 在上述坐标内搜索页面元素
3. 使用类似 var s = getElementById('ElementIDFoundinStepAbove').innerHTML; 的方法

这似乎是一个相当合理的方法，但我不确定是否可行。

---

编辑：

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

2444430

希望这能对你有所帮助。

:)

Jason

- anon271334

---

+1 那个帖子看起来是最好的选择，只是想引起注意，因为它在回答中并不突出。 - Brad Mace

@bemace：除了重复问题中已经建议的内容以外，它并没有提供其他解决方案。 - artemave