How to get selected word when double-click on div, p, span?

Question

Can you get the word the user has double-clicked on? I've tried in a onDblClick eventhandler but selectionStart is undefined there; and the onselect event seems to be available only for TextArea.

The only way I've been able to do this is to wrap each and every word in its own SPAN. Yahoo knows what word is highlighted when you right-click. And in IE, the accelerators know the highlighted word too. Are these connecting to the browser "below" the javascript/DOM layer, to some API? — Tim, Feb 17 '10 at 22:36

David Tang · Answer 1 · 2011-01-05T22:27:00.677

You can use document.selection.createRange().text in IE, and window.getSelection().toString() in firefox and webkit, and attach to the ondblclick handler like so:

document.ondblclick = function () {
   var sel = (document.selection && document.selection.createRange().text) ||
             (window.getSelection && window.getSelection().toString());
   alert(sel);
};

References:

MSDN, for document.selection
MDN, for window.getSelection()

score 0 · Answer 2 · answered Oct 01 '21 at 07:07

A Good answer by @David Tang

and window.getSelection().toString() is what I used.

I want to share that you can use baseOffset and extentOffset too.

<p>test data.</p>

<script>
  document.addEventListener("dblclick", (e)=>{
    const selection = document.getSelection()
    // console.log(selection.anchorNode.data) // is whole text: "test data."
    const selectContent = selection.anchorNode.data.slice(selection.baseOffset, selection.extentOffset)
    console.log(selectContent)    
  })
</script>

How to get selected word when double-click on div, p, span?

2 Answers2