如何使用 JavaScript 获取光标下的单词？

Question

例如，如果我有

<p> some long text </p>

在我的 HTML 页面上，我怎么知道鼠标光标位于“文本”一词上方？

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

Answer 1

除了其他两个答案，您可以使用 jQuery（或一般的 javascript）将您的段落分成多个跨度。

这样一来，您就无需考虑输出带有单词跨度的文本。让你的 javascript 为你做。

例如

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>

<script type="text/javascript">
    $(function() {
        // wrap words in spans
        $('p').each(function() {
            var $this = $(this);
            $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
        });

        // bind to each span
        $('p span').hover(
            function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
            function() { $('#word').text(''); $(this).css('background-color',''); }
        );
    });
</script>

请注意，上面的代码虽然有效，但会删除段落标签内的所有 html。

jsFiddle 示例

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

Answer 2

我的其他答案仅适用于 Firefox。此答案适用于 Chrome。 （也可能在 Firefox 中工作，我不知道。）

 function getWordAtPoint(elem, x, y) {
  if(elem.nodeType == elem.TEXT_NODE) {
    var range = elem.ownerDocument.createRange();
    range.selectNodeContents(elem);
    var currentPos = 0;
    var endPos = range.endOffset;
    while(currentPos+1 < endPos) {
      range.setStart(elem, currentPos);
      range.setEnd(elem, currentPos+1);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.expand("word");
        var ret = range.toString();
        range.detach();
        return(ret);
      }
      currentPos += 1;
    }
  } else {
    for(var i = 0; i < elem.childNodes.length; i++) {
      var range = elem.childNodes[i].ownerDocument.createRange();
      range.selectNodeContents(elem.childNodes[i]);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.detach();
        return(getWordAtPoint(elem.childNodes[i], x, y));
      } else {
        range.detach();
      }
    }
  }
  return(null);
}

在您的 mousemove 处理程序中，调用 getWordAtPoint(e.target, e.x, e.y);

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