检测光标下的Word [英] Detecting Word under the cursor

问题描述

如何最好地使用JavaScript检测光标下的单词？

How best to detect the word under the cursor using JavaScript?

我知道之前已经问过这个问题，但是我看到的解决方案不起作用在所有场景中。

I know that this question has been asked before, but the solutions that I have seen do not work in all scenarios.

我已经隔离了代码不起作用的一些位置并将其放在JSFiddle容器中（ http://jsfiddle.net/ohaf4ytL/ ）。按照控制台进行操作，您可以看到Блгcви2душEмоS仅在悬停时列出Блгcви2而不是душE和моS。

I have isolated some locations where the code does not work and placed it in a JSFiddle container (http://jsfiddle.net/ohaf4ytL/). Follow along in console, and you can see that "Блгcви2 душE моS" only lists "Блгcви2" and not "душE" and "моS" when hovered over.

当前正在使用的代码取自如何使用光标获取单词JavaScript？由Eyal回答。这不是一个公认的答案，但没有多种选择。添加跨度是一个黑客，也不处理像Abc这样的情况。 range.expand（'word'）功能在一个单词中有字符时会切断（我的文字有这个），但我认为这不是唯一的问题。

The current code in use is taken from How to get a word under cursor using JavaScript? answer by Eyal. It is not an accepted answer, but there's not a large choice of options. Adding spans is a hack and also does not handle cases like Abc. The range.expand('word') feature cuts off when there are characters such as ) inside a word (and my text has this), but I think that's not the only issue.

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);
}    

推荐答案

一种完成你的方法想要将句子分成html元素，然后听一个悬停事件。例如，使用 jQuery ：

A way of accomplishing what you want would be to split the sentence into html elements and then listening to a hover event. For example, using jQuery:

HTML：

<div id="text"> Блгcви2 душE Блгcви2 This is a test</div>

JavaScript：

JavaScript:

var div = $("#text");
div.html(div.text().replace(/(\S+)/g, "<span>$1</span>"));

$("#text span").hover(function(event){
    console.log($(this).text());
});

我查找了任何与正则表达式\S不同的空格，HTML现在更新为：

I looked for anything that's not a space with the regex \S and the HTML is now updated to:

<div id="text"> 
  <span>Блгcви2</span>
  <span>душE</span>
  <span>Блгcви2</span>
  <span>This</span>
  <span>is</span>
  <span>a</span>
  <span>test</span>
</div>

当您将鼠标悬停在单词上时，该单词将在浏览器的控制台中打印出来。

When you hover over a word, the word will printed out in the console of your browser.

这篇关于检测光标下的Word的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！