웹 개발을 하다 보면 사용자 동작에 따라 특정 요소 내부의 텍스트를 프로그래밍 방식으로 선택하거나, 반대로 선택 상태를 해제해야 하는 경우가 종종 있습니다. JavaScript에서는 window.getSelection() 객체가 제공하는 메서드를 활용하면 이러한 작업을 아주 간단하게 구현할 수 있습니다.
핵심 메서드 살펴보기
- selectAllChildren(element) — 지정한 요소의 모든 자식 노드(텍스트 포함)를 한 번에 선택 범위에 포함시킵니다.
- removeAllRanges() — 현재 문서에 적용된 모든 선택 범위(selection range)를 제거하여 텍스트 선택을 해제합니다.
예제 코드
다음은 JavaScript를 사용하여 요소(div) 내부의 텍스트를 선택하고 해제하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Select and Deselect Text Inside an Element</h1>
<div style="color: green;" class="result">
Here is some text inside the div
</div>
<button class="Btn">SELECT</button>
<button class="Btn">DESELECT</button>
<h3>Click on the above button to select/de-select text inside the div</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelectorAll(".Btn");
BtnEle[0].addEventListener("click", () => {
window.getSelection().selectAllChildren(resEle);
});
BtnEle[1].addEventListener("click", () => {
window.getSelection().removeAllRanges();
});
</script>
</body>
</html>
코드 설명
document.querySelector(".result")— 텍스트가 담긴 div 요소를 가져옵니다.querySelectorAll(".Btn")— SELECT와 DESELECT 두 개의 버튼을 배열 형태로 가져옵니다.- 첫 번째 버튼 클릭 시
window.getSelection().selectAllChildren(resEle)가 실행되어 div 내부의 텍스트 전체가 선택됩니다. - 두 번째 버튼 클릭 시
window.getSelection().removeAllRanges()가 실행되어 모든 선택이 해제됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
'SELECT' 버튼을 클릭한 경우 — div 요소 내부의 텍스트 전체가 자동으로 선택됩니다.
'DESELECT' 버튼을 클릭한 경우 — 이전에 선택되었던 텍스트의 선택 상태가 모두 해제됩니다.
이처럼 Selection API를 활용하면 별도의 라이브러리 없이도 순수 JavaScript만으로 텍스트 선택과 해제 기능을 손쉽게 구현할 수 있습니다. 검색 결과 하이라이트, 복사 버튼 등 다양한 UI 기능에 응용해 보세요.