[React] 정규표현식을 이용하여 텍스트 안에서 해시태그 분리하기

 

 

부모 컴포넌트에서 아래와 같이 텍스트를 전달하는 컴포넌트를 만든다

const textData = '정규표현식 #리액트 #react #정규표현식' //ex

<TextContent textData={textData}/>

 

 

[TextContent.js]

const TextContent = ({ textData }) => (
  // '정규표현식 #리액트 #react #정규표현식'
  <div>
    {textData.split(/(#[^\s#]+)/g).map((item) => {
      //split에서는 ()를 써야함
      if (item.match(/(#[^\s#]+)/)) {
        return (
          <Link>{item}</Link>
        );
      }
      return v;
    })}
  </div>
);

 

 

const textData = '정규표현식 #리액트 #react #정규표현식'

 

1. textData.split(/(#[^\s#]+)/g) 

 

/#[^\s#]+/g : #으로 시작하는 1개 이상의(+) 문자안에 띄어쓰기(\s)와 #을 포함하지 않는 것

 

split를 사용하여 분리된 배열을 만들어준다.

textData.split(/(#[^\s#]+)/g) 

* split를 할 경우 ()처리를 해주어야 한다.

 

결과:

['정규표현식 ', '#리액트', ' ', '#react', ' ', '#정규표현식', '']

 

2. map

분리된 배열에 map을 사용하여 각 요소마다

해당 정규식에 포함이 되어있는지 match를 통해서 확인한다.

 

3. match

item.match(/(#[^\s#]+)/)를 하여 값이 나온다면 Link를 걸어 return해주고

null이 나온다면 일반 텍스트로 변환하여 return한다.

​