comment obtenir un mot sous le curseur en utilisant JavaScript

Question

dans ce cas: <p> some long text </p>

Comment puis-je savoir que le curseur de la souris est au-dessus du mot 'texte'?

Answer 1

Outre les deux autres réponses, vous pourrez peut-être diviser vos paragraphes en plusieurs parties à l’aide de jQuery (ou javascript en général).

De cette façon, vous n’auriez pas besoin de penser à la sortie de votre texte avec une étendue autour des mots. Laissez votre javascript le faire pour vous.

par exemple

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

Notez que le code ci-dessus, tout en fonctionnant, supprimera tout code HTML contenu dans vos balises de paragraphe.

Answer 2

Mon autre réponse ne fonctionne que dans Firefox. Cette réponse fonctionne dans Chrome. (Peut aussi fonctionner dans Firefox, je ne sais pas.)

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

Dans votre gestionnaire de souris, appelez getWordAtPoint(e.target, e.x, e.y);

Answer 3

À ma connaissance, vous ne pouvez pas.

La seule chose à laquelle je peux penser est de mettre chacun des mots dans leur propre élément, puis d'appliquer la souris sur les événements à ces éléments.

 <p><span>Some</span> <span>long</span> <span>text</span></p>

<script>
$(document).ready(function () {
  $('p span').bind('mouseenter', function () {
    alert($(this).html() + " is what you're currently hovering over!");
  });
});
</script>
 

Answer 4

Il existe une API pour cela dans le brouillon CSSOM View actuel: document.caretPositionFromPoint(x,y)

Cependant, vous devrez vérifier quel navigateur le supporte. Firefox 7 semble ne pas le supporter du tout, alors que les rapports de bogues indiquent que Firefox 9 le fera. Chrome 14 prend en charge caretRangeFromPoint(x,y) ce qui est essentiellement le même, mais à partir d'un brouillon CSSOM plus ancien.

Answer 5

Ceci est une démonstration en direct pour savoir comment obtenir un mot sous le curseur en utilisant JavaScript basé sur le code source fourni par Damovisa : http://jsfiddle.net/5gyRx/ .