Обнаружение Word под курсором

Как лучше всего найти слово под курсором с помощью JavaScript?

Я знаю, что этот вопрос задавали раньше, но решения, которые я видел, не работают во всех сценариях.

Я выделил некоторые места, где код не работает, и поместил его в контейнер JSFiddle (http://jsfiddle.net/ohaf4ytL/). Следуйте за консолью, и вы можете видеть, что "Блгcви2 душE моS" только перечислил "Блгcви2", а не "душE" и "моS" при наведении курсора.

Текущий используемый код берется из Как получить слово под курсором, используя JavaScript? ответ от Eyal. Это не принятый ответ, но нет большого выбора вариантов. Добавление интервалов - это взлом, а также не обрабатывает такие случаи, как 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);
}

Ответы

Ответ 1

Способ выполнить то, что вы хотите, - это разделить предложение на html-элементы, а затем прослушать событие hover. Например, используя 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>

Когда вы наводите курсор на слово, слово будет распечатано в консоли вашего браузера.