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
Selected Reading
Select and Deselect Text Inside an Element using JavaScript
In JavaScript, you can programmatically select and deselect text inside DOM elements using the Selection API. This is useful for creating interactive features like highlighting content or implementing custom text selection controls.
Core Methods
The key methods for text selection are:
-
window.getSelection().selectAllChildren(element)- Selects all text inside an element -
window.getSelection().removeAllRanges()- Clears all current selections
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select and Deselect Text</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 20px;
font-weight: 500;
color: green;
padding: 15px;
border: 2px solid #ddd;
margin: 20px 0;
background-color: #f9f9f9;
}
.btn {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Select and Deselect Text Inside an Element</h1>
<div class="result">
This is some sample text that can be selected and deselected using JavaScript.
Click the buttons below to see the selection in action.
</div>
<button class="btn" id="selectBtn">SELECT TEXT</button>
<button class="btn" id="deselectBtn">DESELECT TEXT</button>
<h3>Click the buttons above to select or deselect the text inside the div</h3>
<script>
let textElement = document.querySelector(".result");
let selectBtn = document.getElementById("selectBtn");
let deselectBtn = document.getElementById("deselectBtn");
// Select all text inside the element
selectBtn.addEventListener("click", () => {
window.getSelection().selectAllChildren(textElement);
});
// Clear all text selections
deselectBtn.addEventListener("click", () => {
window.getSelection().removeAllRanges();
});
</script>
</body>
</html>
How It Works
The window.getSelection() object provides access to the current text selection:
- selectAllChildren(): Creates a selection range that encompasses all child nodes of the specified element
- removeAllRanges(): Removes all selection ranges, effectively clearing any highlighted text
Alternative Method: Using Range API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Range API Selection</title>
</head>
<body>
<p id="textContent">Select this paragraph using the Range API method.</p>
<button onclick="selectWithRange()">Select with Range</button>
<button onclick="clearSelection()">Clear Selection</button>
<script>
function selectWithRange() {
let element = document.getElementById("textContent");
let range = document.createRange();
range.selectNodeContents(element);
let selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
function clearSelection() {
window.getSelection().removeAllRanges();
}
</script>
</body>
</html>
Common Use Cases
- Copy functionality: Pre-selecting text before copying to clipboard
- Highlighting features: Drawing attention to specific content
- Text editors: Implementing select-all functionality
- Reading apps: Allowing users to easily select passages
Browser Compatibility
The Selection API is well-supported across modern browsers. Both selectAllChildren() and removeAllRanges() work in Chrome, Firefox, Safari, and Edge.
Conclusion
JavaScript's Selection API provides a straightforward way to programmatically control text selection. Use selectAllChildren() to select content and removeAllRanges() to clear selections for enhanced user interactions.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements