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

admin管理员组

文章数量:1026989

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.

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.

• javascript
• html
• selection
• selection-api

Share Improve this question Follow edited Nov 21, 2022 at 8:04 sideshowbarker♦ 88.3k2929 gold badges215215 silver badges212212 bronze badges asked Feb 17, 2010 at 14:29 TimTim 42966 silver badges2020 bronze badges 2

• 1 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 Commented Feb 17, 2010 at 22:36
• That is, Yahoo Search on the context-menu in Firefox. – Tim Commented Feb 17, 2010 at 22:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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

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>

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.

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.

• javascript
• html
• selection
• selection-api

Share Improve this question Follow edited Nov 21, 2022 at 8:04 sideshowbarker♦ 88.3k2929 gold badges215215 silver badges212212 bronze badges asked Feb 17, 2010 at 14:29 TimTim 42966 silver badges2020 bronze badges 2

• 1 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 Commented Feb 17, 2010 at 22:36
• That is, Yahoo Search on the context-menu in Firefox. – Tim Commented Feb 17, 2010 at 22:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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

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>

本文标签： javascriptHow to get selected word when doubleclick on divPspanStack Overflow