검색 하이라이트가 사용자의 선택 영역을 삭제하는 이유
검색어를 강조하려고 innerHTML로 문단을 매번 다시 만들면, 사용자가 선택한 텍스트의 DOM 노드가 제거되어 복사 내용이 사라질 수 있습니다. CSS Custom Highlight API로 노드 구조를 건드리지 않고 Range를 오버레이로 칠하면 선택 영역을 보존하면서 검색 결과를 표시할 수 있습니다.
AI, 개발 도구, 오픈소스, 보안과 인프라의 변화와 이용 조건을 설명하는 최신 기사와 해설입니다.
검색어를 강조하려고 innerHTML로 문단을 매번 다시 만들면, 사용자가 선택한 텍스트의 DOM 노드가 제거되어 복사 내용이 사라질 수 있습니다. CSS Custom Highlight API로 노드 구조를 건드리지 않고 Range를 오버레이로 칠하면 선택 영역을 보존하면서 검색 결과를 표시할 수 있습니다.