How to Get a Word Under Cursor Using JavaScript

How to get a word under cursor using JavaScript?

Further to the two other answers, you may be able to split your paragraphs up into spans using jQuery (or javascript generally).

That way, you wouldn't need to think about outputting your text with spans around the words. Let your javascript do it for you.

e.g.

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

Note that the above code, while it works, will strip out any html inside your paragraph tags.

jsFiddle example

How to get word under cursor?

Well, no magic tricks so far, so here is the dull boring (and yet working) solution:

  $(document.body).mousemove(function(e){

    var onmousestop = function() {
      function getHitWord(hit_elem) {
        var hit_word = '';
        hit_elem = $(hit_elem);

        //text contents of hit element
        var text_nodes = hit_elem.contents().filter(function(){
          return this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/[a-zA-Z]{2,}/)
        });

        //bunch of text under cursor? break it into words
        if (text_nodes.length > 0) {
          var original_content = hit_elem.clone();

          //wrap every word in every node in a dom element
          text_nodes.replaceWith(function(i) {
            return $(this).text().replace(/([a-zA-Z-]*)/g, "<word>$1</word>")
          });

          //get the exact word under cursor
          var hit_word_elem = document.elementFromPoint(e.clientX, e.clientY);

          if (hit_word_elem.nodeName != 'WORD') {
            console.log("missed!");
          }
          else  {
            hit_word = $(hit_word_elem).text();
            console.log("got it: "+hit_word);
          }

          hit_elem.replaceWith(original_content);
        }

        return hit_word;
      }

      var hit_word = getHitWord(document.elementFromPoint(e.clientX, e.clientY));
      ...
    }
  }

There are few other subtleties involved (like event 'noise reduction', keeping replaced dom context (such as selection) and so forth), but you get the idea.

Here you can learn how set up mousestop event.

EDIT:

Making custom html elements may not be that strait forward in IE (who would have thought?). Check out more here.

Get word under mouse pointer

You need the parentheses that appear in the original regular expression. In regular expression notation, parentheses form a "match group" which is substituted in for the "$1" in the replace string.

$this.html($this.text().replace(/([^\x00-\x80]+)/g, "<span>$1</span>"));

Without any match groups in your regex, the $1 is simply treated as a literal dollar sign and one.

When you have multiple parenthesized match groups, the groups are used in to replace dollar-sign-denoted numbered placeholders in the order that the match groups are opened (the first match group replaces $1, the second replaces $2, etc).

Get a word under cursor and output a corresponding translation using JavaScript

You can just use the ::before pseudo-selector to do it. No JavaScript required.

.kana {  position: relative;}.kana:hover {  color: blue;}.kana:hover::before {  position: absolute;  content: attr(romaji);  top: 1em;  color: blue;}

<span class="kana" romaji="sho">しょ</span><span class="kana" romaji="ha">は</span><span class="kana" romaji="n">ん</span>

get text under current cursor positon inside a textarea

You are wellcome,

var borderChars = [' ', '\n', '\r', '\t']
$(function() {
    $('textarea').on('click', function() {
        var text = $(this).html();
        var start = $(this)[0].selectionStart;
        var end = $(this)[0].selectionEnd;
        while (start > 0) {
            if (borderChars.indexOf(text[start]) == -1) {
                --start;
            } else {
                break;
            }                        
        }
        ++start;
        while (end < text.length) {
            if (borderChars.indexOf(text[end]) == -1) {
                ++end;
            } else {
                break;
            }
        }
        var currentWord = text.substr(start, end - start);
        console.log(currentWord);
    });
});

---

Related Topics