Trawling

최신기사

AI, 개발 도구, 오픈소스, 보안과 인프라의 변화와 이용 조건을 설명하는 최신 기사와 해설입니다.

검색 하이라이트가 사용자의 선택 영역을 삭제하는 이유

발행

검색어를 강조하려고 innerHTML로 문단을 매번 다시 만들면, 사용자가 선택한 텍스트의 DOM 노드가 제거되어 복사 내용이 사라질 수 있습니다. CSS Custom Highlight API로 노드 구조를 건드리지 않고 Range를 오버레이로 칠하면 선택 영역을 보존하면서 검색 결과를 표시할 수 있습니다.