얼마 전 인턴 채용 사전과제 중에 추천 검색어 하이라이팅 기능을 구현하는 과제를 받았습니다!
어떻게 구현했는지 공유해 보려고 합니다 -!

검색어 하이라이팅이란?

우선 검색어 하이라이팅이란 아래와 같은 기능을 말합니다.
내가 검색창에 친 문자열과 추천검색어 사이에 공통인 부분을 튀는 색을 주거나 하이라이팅을 함으로써 추천검색어와 내가 입력한 문자열이 얼마나 일치하는 지 나타내는 기능입니다.

구현

아이디어

1. 추천 검색어를 현재 내가 input에 넣은 문자열로 split한다.
2. Array.prototype.split() 메소드는 주어진 문자열을 파라미터로 넘겨준 separator 마다 끊은 부분 문자열을 담은 Array를 반환합니다.

그런데, separator가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 separator 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.
ex) '반가워안녕잘가안녕'.split('안녕')의 결과는 ['반가워', '잘가', ''] 이다.

3. 따라서, split을 한 결과 배열을 Array.prototype.map()으로 돌면서 빈 문자열을 만났을 때만 따로 텍스트를 하이라이팅 해주는 컴포넌트를 반환하면 되는 것이다. (왜냐면 추천 검색어들은 보통 내가 입력한 문자열로 시작하기 때문에)

코드

// 하이라이팅을 위한 컴포넌트
const MarkedText = ({ text }: { text: string }) => {
  return <span className="text-NAILPINK font-bold">{text}</span>;
};

// 추천 검색어에 하이라이팅을 주는 함수
const getHighlight = (name: string, find: string) => {
  const splitResult = name.split(find);
  
  return splitResult.map((word, idx) => {
    return word === "" ? <MarkedText text={find} /> : <span>{word}</span>;
  });
};