JavaScript

Retrieve Selected Text with JavaScript! How to Use the getSelection Method

 

This time, we’ll introduce one of JavaScript’s handy features: techniques for text selection using the getSelection method. By using this method, you can retrieve and display the string from the range of text selected by the user on the page. Let’s go through this step by step to make it easy to understand for beginners!

Contents
  1. Start with the Basics: What is getSelection?
  2. Styling with CSS
  3. Displaying Text with HTML
  4. Retrieve Selected Text with JavaScript
  5. Demo Page: Display Text from Selected Range Using getSelection
  6. Summary

Start with the Basics: What is getSelection?

The JavaScript getSelection method is used to obtain information about the range of text selected by the user on a web page. This feature is very useful for scenarios like copying and pasting text, highlighting, and searching for specific text.

Styling with CSS

First, let’s apply proper styling to the page. CSS is used to adjust the basic appearance of text and the page. For example, you can apply styles like the following:

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.4em;
}
h2{
  font-size:20px;
}
</style>

This CSS code sets the base fonts, padding, and margins for the page and adjusts the style of headings.

Displaying Text with HTML

Next, use HTML to set up text that users can select and a textarea to display the selected text. For example, you can set it up like this:

<h1>The string from the range selected with the mouse cursor will be displayed in the textarea.<br>Try selecting some text on this page with your mouse cursor.</h1>
<br>

<h2>abcdefghijklmnopqrstuvwxyz</h2>
<br>
<h2>aiueokakikukekosashisusesotachitsutetonaninunenohahihuhehomamimumemoyayuyorarirurerowawon</h2>
<br>
<h2>gagigugegozazizuzezodajidudedobabibubebopapipupepo</h2>
<br>
<br>

<div>The text selected on this page will be displayed below.</div>
<textarea id="copy" cols="100" rows="18"></textarea>

Retrieve Selected Text with JavaScript

Finally, use JavaScript to display the selected text in the textarea. This is done using the getSelection method. Extract the selected text with getSelection and output it to the tag with id=”copy” (textarea).

<script type="text/javascript">
document.onselectionchange = function() {
  var cpytxt = document.getSelection();
  document.getElementById("copy").textContent = cpytxt;
}
</script>

This code retrieves the text selected by the user on the page and displays it in the textarea each time the text selection changes.

Demo Page: Display Text from Selected Range Using getSelection

Now the basic functionality is complete. Try it out on the demo page below. When you select any text on the page, the text will appear in the textarea at the bottom.

Demo: Display Text from Selected Range Using getSelection

Summary

In this article, we introduced how to use the JavaScript getSelection method to retrieve and display the text selected by the user on the page. This simple technique not only enhances user experience but is also very useful for developers. Be sure to utilize it in your projects!

※ Use it at your own risk when reusing this code. Do not reuse the Google Analytics tags in the <head> section of the demo page.

getSelection
RELATED POST