자동완성 텍스트 부분 하이라이트 처리

입력한 검색어와 매칭되는 텍스트를 어떻게하면 하이라이트 처리할 수 있을까?

function highlightMatchingText(text: string, searchTerm: string) {
  if (!searchTerm?.trim() || !text) return text;

  const cleanedSearchTerm = searchTerm.replace(/\s+/g, '');
  if (!cleanedSearchTerm) return text;

  try {
    const regex = new RegExp(`(${cleanedSearchTerm})`, 'gi');
    const parts = text.split(regex);

    return parts.map((part, index) => {
      if (part === '') {
        return part;
      }

      if (regex.test(part)) {
        return (
          <mark key={index} className={styles['highlight-text']}>
            {part}
          </mark>
        );
      }

      return part;
    });
  } catch {
    return text;
  }
}

/\s+/g

소괄호가 있으면 split()이 매칭된 부분도 배열에 포함