[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)

Search Times 미니 프로젝트에 적용한 검색어 하이라이트

 

검색창에 입력한 키워드와 일치하는 단어를 하이라이트(강조) 하기 위해 split, join 등을 사용할 수 있지만 코드가 다소 복잡해진다. 정규식을 사용하면 깔끔하게 구현할 수 있다.

 

하이라이터 함수 정의 ▼

const getHighlightedText = (text, query) => {
  const re = new RegExp(`(${query})`, 'gi');

  if (query !== '' && text.match(re)) {
    const parts = text.split(re);

    return (
      <>
        {parts.map((part) =>
          part.toLowerCase() === query.toLowerCase() ? (
            <mark key={Math.random().toString(36).slice(2)}>{part}</mark>
          ) : (
            part
          ),
        )}
      </>
    );
  }

  return text;
};

 

하이라이터 함수 사용 ▼

return (
  // ...생략
  <h2>{getHighlightedText(headline, term)}</h2>
);

 

하이라이터 함수 톺아보기

---

text와 query 파라미터를 아래처럼 받았다고 가정해본다. text 문장에 alibaba라는 문자열(단어)이 들어가 있다면 해당 부분은 모두 하이라이트 처리해야 한다(주황색으로 표시한 부분)

// text 파라미터
'A Chastened Alibaba Tones Down Its Singles alibabaDay Retail Bonanza';

// query 파라미터
'alibaba';

 

RegExp 객체 생성

정규식 객체를 생성할 때 변수를 사용하려면 () 벡틱과 소괄호로 한번 감싼 후 (${변수명}) 형태로 입력해준다.

const re = new RegExp(`(${query})`, 'gi'); // /(alibaba)/gi

 

• g : 전역 검색 플래그. 모든 검색 결과를 배열로 반환. g 플래그가 없으면 최초 검색 결과만 반환.
• i : 대소문자 구분 없음 플래그(insensitive). i 플래그가 있으면 대소문자를 구분하지 않음

 

검사할 텍스트가 있는지 확인

➊query 혹은 text가 빈 문자열이거나, ➋text에 매칭되는 query가 없다면 하이라이팅을 할 필요가 없으므로 이에 대한 조건을 걸어준다.

if (query !== '' && text.match(re)) {
  // ...하이라이팅 추가 로직
}

 

str.match(regexp) 메서드에서 str이 빈 문자열이거나, 매칭되는게 없으면 null을 반환한다. gi 플래그를 붙였으므로 대소문자를 구분하지 않고, 찾는 단어가 여러번 등장하면 모든 결과를 배열로 반환한다.

''.match(re); // null
'hello'.match(re); // null

'tencentaLiBaBa'.match(re); // ['aLiBaBa']
'tencentalibabadouyinALIbaba'.match(re); // ['alibaba', 'ALIbaba']

 

하이라이트 단어를 기준으로 split

파라미터로 받은 query는 alibaba 라는 문자열이므로 이를 기준(구분자)으로 배열에 담긴다.

const parts = text.split(re);
// ['A Chastened ', 'Alibaba', ' Tones Down Its Singles ', 'alibaba', 'Day Retail Bonanza']

 

⭐️ 눈여겨 볼 점은 split의 구분자(seperator)도 배열에 포함됐다는 점이다. 일반적으로 split은 구분자를 배열에 포함하지 않는다. 하지만 구분자가 포획괄호()를 포함하는 정규식이면 포획된 결과도 배열에 포함된다. 포획 괄호는 정규식에서 표현식을 하나의 단위로 취급할 때 사용한다.

'12345six789'.split('six'); // ['12345', '789']
'12345six789'.split(/six/); // ['12345', '789']
'12345six789'.split(/(six)/); // ['12345', 'six', '789']

 

하이라이트할 단어에 mark 태그 추가

각 단어를 소문자로 변환해서 query 문자열과 같다면 해당 단어에 <mark> 태그를 추가해준다.

return (
  <>
    {parts.map((part) =>
      part.toLowerCase() === query.toLowerCase() ? (
        <mark key={Math.random().toString(36).slice(2)}>{part}</mark>
      ) : (
        part
      ),
    )}
  </>
);

 

<mark> 태그는 현재 맥락과 관련있는 텍스트를 강조할 때 사용하며, 노란색 하이라이트 배경으로 렌더된다.

`<mark>`와 `<strong>` 요소의 차이점을 기억하세요. 텍스트에서, `<mark>`는 연관성을 가진 부분을, `<strong>`은 중요도를 가진 부분을 나타낼 때 사용합니다. — MDN

 

<mark> 태그를 사용한 곳엔 위처럼 노란색 배경으로 나온다

 

하이라이트할 단어가 많다면 key를 지정하기 애매하므로 난수화한 문자열을 만들어서 사용할 수 있다.

// lib/utils.ts
export const getRandomKey = (id?: string | number) => {
  const randomNum = Math.random().toString(36).slice(2);
  return id ? `${id}-${randomNum}` : randomNum;
};

Math.random().toString(36).slice(2);
// Math.random() : 0.1656391799983088
// toString(36) : '0.5yo27t64476'
// slice(2) : 'yo27t64476'

 

• Math.random() : 0이상 1미만의 부동 소수점 난수
• toString(36) : 36진수로 변환 — toString은 2~36 사이의 진수(Radix)를 파라미터로 받는다.

 

번외 — 문자열에 링크 걸기(Linkify)

---

검색어 하이라이트와 비슷한 방법으로 문자열에 URL이 있다면 <a> 태그로 감싸는 Linkify 기능을 구현할 수 있다. http https 등 URL과 관련된 프로토콜을 식별할 수 있는 정규식을 작성한 후 split 메서드의 구분자로 사용해서 분리하면 된다. 배열의 각 요소로 분리된 문자열에서 정규식에 매칭된 문자열(링크)은 항상 홀수 번째 인덱스에 위치하게 된다(정규식에 따라 달라질 수 있음).

const regex = /(https?:\/\/\S+)/g; // http 및 https 구분

const paragraph = '자바스크립트 https://ko.javascript.info/intro 는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다. 이 외에도 자바스크립트 엔진 https://en.wikipedia.org/wiki/JavaScript_engine 이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작합니다.';

console.log(paragraph.split(regex));
/*
[
  '자바스크립트 ',
  'https://ko.javascript.info/intro',
  ' 는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다. 이 외에도 자바스크립트 엔진 ',
  'https://en.wikipedia.org/wiki/JavaScript_engine',
  ' 이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작합니다.'
*/

 

위 방법을 이용해 홀수번째 인덱스의 문자열은 <a> 태그로 감싸도록 작성하면 된다. 이메일, 해시태그 등 더 전문적인 Linkify를 원한다면 linkifyjs 같은 특화된 라이브러리를 사용할 수 있다. 리액트 컴포넌트도 지원한다.

// LinkifyText.tsx
import React from 'react';
import { getRandomKey } from 'lib/utils';

export default function LinkifyText({ text }: { text: string }) {
  const regex = /(https?:\/\/\S+)/g;

  return (
    <>
      {text.split(regex).map((part, index) =>
        index % 2 === 0 ? (
          part
        ) : (
          <a
            key={getRandomKey(index)} // [랜덤 key 생성 유틸 함수](https://www.notion.so/TIL-Linkify-e4bb8f6a7527400992ca396e0614d32d?pvs=21)
            href={part}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-500 hover:text-blue-400"
          >
            {part}
          </a>
        ),
      )}
    </>
  );
}

 

레퍼런스

---

• Highlight text using ReactJS
• [react] 텍스트 하이라이팅
• Detect URLs in text with JavaScript  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요