HTML 페이지에서 이미 선택된 텍스트의 선택 상태를 해제(취소)해야 하는 경우가 있습니다. 이럴 때 JavaScript의 window.getSelection() 메서드와 removeAllRanges() 메서드를 함께 사용하면 간단하게 처리할 수 있습니다.window.getSelection()은 현재 문서에서 사용자가 선택한 텍스트 범위 정보를 담고 있는 Selection 객체를 반환합니다. 여기에 removeAllRanges()를 호출하면 모든 선택 영역(range)이 제거되어 페이지 전체의 텍스트 선택이 해제됩니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>문서</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>HTML 페이지에서 텍스트 선택 해제하기</h1>
<div style="color: green;" class="result">
div 요소 안에 있는 텍스트입니다.
</div>
<button class="Btn">여기를 클릭</button>
<h3>위 버튼을 클릭하면 이 페이지의 모든 텍스트 선택이 해제됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
window.getSelection().removeAllRanges();
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
먼저 페이지에서 일부 텍스트를 마우스로 드래그하여 선택합니다.
그런 다음 '여기를 클릭' 버튼을 누르면 다음과 같이 선택된 텍스트가 즉시 해제됩니다.
이처럼 window.getSelection().removeAllRanges() 한 줄만으로도 버튼 클릭 시점에 페이지의 모든 텍스트 선택을 손쉽게 초기화할 수 있습니다. 텍스트 복사 방지 기능이나 UI 인터랙션 초기화 등 다양한 상황에서 유용하게 활용할 수 있습니다.