Javascript 如何将单词置于光标下？

假设有一个

mousestop

事件附加到整个文档，当鼠标停止移动时，找出光标下确切单词（如果有文本）的最佳方法是什么

我可以从事件处理程序中获取底层（jQuery）元素-

$（document.elementFromPoint（e.clientX，e.clientY））

，那么接下来是什么呢

---

到目前为止，我的想法是将hit元素中的所有文本节点替换为它们的副本，其中每个单词都包装在DOM元素中（不知道是哪一个），然后再次调用

$（document.elementFromPoint（e.clientX，e.clientY））

，以获取鼠标下仅包含单词的元素<但这似乎是一个复杂的计划，我想知道我是否错过了更简单的计划

我没有任何代码可供您使用，但这可能会有所帮助：

当光标空闲时，获取坐标

在上面的坐标处搜索页面中的元素

使用类似于

var s=getElementById（'ElementIDFoundinStepAbove'）.innerHTML

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

---

编辑：

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

我希望这有帮助

：）

---

Jason

好吧，到目前为止还没有魔术，所以这里有一个枯燥乏味（但仍然有效）的解决方案：

  $(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));
      ...
    }
  }

$（document.body）.mousemove（函数（e）{
var onmousestop=函数（）{
函数getHitWord（命中元素）{
var hit_word=''；
命中要素=$（命中要素）；
//hit元素的文本内容
var text_nodes=hit_elem.contents（）.filter（函数（））{
返回this.nodeType==Node.TEXT\u Node&&this.nodeValue.match（/[a-zA-Z]{2，}/）
});
//光标下的一堆文本？将其拆分为单词
如果（文本长度>0）{
var original_content=hit_elem.clone（）；
//将dom元素中每个节点中的每个单词包装起来
text_nodes.replaceWith（函数（i）{
返回$（this）.text（）.replace（/（[a-zA-Z-]*）/g，“$1”）
});
//得到光标下的确切单词
var hit_word_elem=document.elementFromPoint（e.clientX，e.clientY）；
如果（点击单词元素nodeName！=“单词”）{
console.log（“错过了！”）；
}
否则{
点击单词=$（点击单词元素）.text（）；
log（“明白了：+点击单词”）；
}
点击元素替换（原始内容）；
}
返回hit_单词；
}
var hit_word=getHitWord（document.elementFromPoint（e.clientX，e.clientY））；
...
}
}

这里几乎没有其他微妙之处（如事件“降噪”、保持替换的dom上下文（如选择）等等），但您已经明白了这一点

您可以学习如何设置mousestop事件

编辑：

---

在IE中创建自定义html元素可能没有那么困难（谁会想到呢？）。请查看更多信息。

来自[另一个问题]（）基本上按照你在问题中的建议去做…他们只是把每个单词包装在自己的元素中，从那里开始就不难了…-如何在保留现有文本样式的同时做到这一点存在一些问题。@Peter：样式问题有一个非常简洁的解决方案-组成你自己的元素。+1该线程看起来是最好的选择，只是想要而已引起人们的注意，因为它在市场上并不突出answer@bemace：除了重复问题中已经提出的内容之外，我事先尝试过将标签中的每个文本元素都包装起来，但这在iPhone3GS上造成了糟糕的性能（文本太多）.所以，我试着用你的技巧在命中测试时用标签临时替换单词。。。