검색 결과 리스트에서 검색어 부분 하이라이트 처리하기

나의 블로그 검색 기능에는 검색 버튼을 클릭하면 검색 페이지로 이동되고 input 창에 검색어를 입력하면 검색 결과가 실시간으로 변경된다.

인풋 창에 입력한 검색어가 타이틀이나, 카테고리, 태그 등을 돌면서 검색어가 포함되어 있으면 아이템을 보여준다.

이 때, 아래 이미지처럼 검색어 부분을 하이라이트 처리하고 싶다.

브라우저의 찾기 기능으로 자동차를 입력하면 자동차 글자에 하이라이팅된다.

포스트 데이터를 map 메소드를 사용하여 포스트의 title을 추출했다고 가정하자.

아래 코드로 title을 mark 태그로 감싼다.

const highlightedTitle = title.replace(new RegExp(keyword, "gi"), `<mark>${keyword}</mark>`);

RegExp 객체를 사용하여 검색어를 대소문자를 구분하지 않고 찾아내며, gi 플래그를 사용하여 전체 문서에서 찾아낸 모든 검색어를 강조한다.

dangerouslySetInnerHTML 속성을 사용하여 <h3> 태그 안에서 HTML 코드를 렌더링할 수 있도록 한다.

return (
    <div key={index}>
      <h3 dangerouslySetInnerHTML={{ __html: highlightedTitle }} />
    </div>
  );

필요하다면, css를 사용하여 태그에 스타일을 적용한다.

mark {
  background-color: yellow;
  color: black;
}