Question

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

我知道之前已经问过这个问题，但我看到的解决方案并不适用于所有场景。

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

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

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

Answer 1

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

HTML：

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

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现在更新为：

<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>

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

检测光标下的Word

1 个答案: