jQuery Data Type How to - Get the word that the caret is on inside a contenteditable div

Question

We would like to know how to get the word that the caret is on inside a contenteditable div.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function getWord() {<!--from   w  w w  .j  a v a 2 s.c  o  m-->
    var sel, word = "";
    if (window.getSelection && (sel = window.getSelection()).modify) {
        var selectedRange = sel.getRangeAt(0);
        sel.collapseToStart();
        sel.modify("move", "backward", "word");
        sel.modify("extend", "forward", "word");
        word = sel.toString();
        // Restore selection
        sel.removeAllRanges();
        sel.addRange(selectedRange);
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.collapse(true);
        range.expand("word");
        word = range.text;
    }
    console.log(word);
}

</script>
</head>
<body>
  <div contenteditable="true" onmouseup="getWord()">
    One <b>para</b>graph here. This is a test.
  </div>
</body>
</html>

The code above is rendered as follows: