react nodeBird 1-9(해시태그 만들기)

해시태그는 정규표현식을 이용해서 만든다.

  해시태그의 경우, 정규표현식을 이용해서 만드는데, {postData.split(/abac/)} 처럼 작성하면 됩니다. // 이런식으로 쓰면 주석처리로 되지만, /abcdef/처럼 안에 내용이 있으면 정규표현식이 됩니다.

  위 그림에서 /g는 global의 뜻이고, 붙이면 여러개가 선택이 되고, 붙이지 않으면 한개만 선택됩니다.

 뒤에 .은 한글자를 의미하지만, 사용자들이 일일히 2글자, 3글자를 해시태그만 쓸 수 없으니 뒤에 +를 붙어주면 모든 글자가 선택이 됩니다. 

 

  하지만, #단위로 끊어야 되기 때문에 다른 방법을 찾아야됩니다. 

  []를 쓰고, 안에 키워드를 입력하면 해당글자를 찾습니다. [^]를 쓰고, 안에 키워드를 이용하면 해당글자를 제외한 글자를 찾는데 이걸 이용해서 해시태그를 완성하면 됩니다.  \s를 써주면 해시태그 간의 공백을 제외해주는 것을 이용하면 됩니다.

  첫번째줄처럼 공백이된 부분은 해결이 되었지만 두번째, 세번째 줄 같은 경우도 해결하긴 위해서는 뒤에 #을 붙여서 떨어지게 해주면 됩니다. 하지만, console.log를 이용해서 확인해보면 #뒤에 안찍히는 것을 볼 수 있는데 이때는 /(#[^\s]+)를 괄호로 묶어주면 나오게 할 수 있습니다.

()(괄호)를 이용해서 포함관계를 만들자.

  Next의 Link 기능을 이용해서 해시태그가 링크로 감쌀 수 있게 해주면 SNS에서 사용하는 해시태그가 완성됩니다.

완성된 해시태그 모습