Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Program to retrieve the text contents of the user selection using JavaScript.
In JavaScript, you can retrieve the text contents of a user's selection using the window.getSelection() method. This is useful for creating text highlighting features, copy functionality, or interactive reading applications.
How It Works
The window.getSelection() method returns a Selection object representing the range of text selected by the user. You can convert this to a string using the toString() method.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Selection Demo</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result, .sample {
font-size: 20px;
font-weight: 500;
color: rebeccapurple;
margin: 15px 0;
}
.sample {
background-color: #f0f8ff;
padding: 10px;
border-radius: 5px;
min-height: 30px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Retrieve Text Selection</h1>
<div class="result">
Select any text from this paragraph. JavaScript provides powerful methods to work with user selections.
You can highlight this text and click the button below to see the selected content.
</div>
<button class="btn">Get Selected Text</button>
<h3>Selected Text:</h3>
<div class="sample">No text selected yet...</div>
<script>
let btnEle = document.querySelector(".btn");
let sampleEle = document.querySelector(".sample");
btnEle.addEventListener("click", () => {
let selectedText = window.getSelection().toString();
if (selectedText.trim() !== "") {
sampleEle.innerHTML = `"${selectedText}"`;
} else {
sampleEle.innerHTML = "No text selected. Please select some text first.";
}
});
// Optional: Real-time selection display
document.addEventListener("selectionchange", () => {
let selection = window.getSelection().toString();
if (selection.length > 0) {
console.log("Current selection:", selection);
}
});
</script>
</body>
</html>
Key Methods
| Method | Description | Returns |
|---|---|---|
window.getSelection() |
Gets the current selection object | Selection object |
toString() |
Converts selection to string | Selected text as string |
selectionchange event |
Fires when selection changes | Event listener |
Practical Use Cases
- Text highlighting: Allow users to highlight important content
- Quote features: Extract selected text for sharing or commenting
- Copy functionality: Custom copy-to-clipboard features
- Text analysis: Analyze selected portions of content
Browser Compatibility
The window.getSelection() method is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older IE versions (below 9), use document.selection.createRange().text.
Conclusion
Using window.getSelection().toString() provides a reliable way to capture user-selected text. This method is essential for creating interactive web applications that respond to text selection.
170 Views
