How to get the Selected Text Using jQuery? | Code Snippet #19

30 Jan , 2014  Code Snippets 

Get Selected Text Using jQueryCode Snippet #19: jQuery code to get the selected text using jQuery. Using mouseup() and mousedown() APIs to fetch the selected text and display them on the page.

Today, we are going to learn how to fetch the selected text using jQuery APIs. We will try to display the selected text in a div area with by using our previous code snippet on dynamically creating div elements.

You can check the demo below – Select Some text from below to see the demo in action:

HTML:

jQuery:

Explanation:

We place all the text to be selected in divs.

We use the mouseup() and mousedown() APIs to trigger the mouse event by the below syntax:

We then call the function getSelctionText() and store in a variable by name “selected”. In the function getSelectionText(), we clear the targetArea as shown below:

We get selected text using the below code:

The selected text is appended to the target area with the help of this code:

Hope you liked this tutorial and code snippet to get the selected text using jQuery. We will come up with more such code snippets. Stay tuned. If you have any doubt or clarification, please let us know by comments.



, ,

Comments are closed.