여기서 정규표현식을 갖고 놀아보자. 일단 정규표현식은 다양한 경우를 고려해야 한다.
아래와 같이 해시태그 사이에 띄워쓰기가 있을 수도 있고 띄워쓰기가 없을 수도 있다.
어떤 사용자는 #을 연달아 적고 아래와 같이 쓸 수도 있다. 사용자들이 각양각색의 방법으로 글을 쓸 수가 있기 때문에 내가 원하는 의도와 일치하는지 체크를 해보는게 좋다.
일단 뒤에 g가 붙냐 안붙냐가 강건인데 g가 붙으면 여러개이고 g가 안붙으면 하나만 뜻한다.
해시태그를 여러개 찾아야하는 나의 입장에서 g를 붙여준다. #을 하면 문자 그대로 #을 뜻한다.
#들이 모두 선택이 되고 g를 빼보면 첫번째 #만 선택된다.
그리고 . 하나를 붙이면 모든 글자 중에서 한글자가 선택되고 ... 세개를 붙이면 3글자가 선택된다.
길이가 항상 3개로 고정된 것이 아니기 때문에 .말고 +를 해주면 글자가 모두다 선택이 된다.
문제점이 있다 공백도 선택이 되는 것이다. 공백은 제거해주려면 어떻게 해야할까? 대괄호를 써주는 방법이 있다.
대괄호를 써서 여기안에 적어둔 것들 중에서 선택하는 것이다. 바로 아래와 같이.. (두나 권재현은 선택이 안되었다.)
이것을 역으로 이용해서 ^을 붙여주면 여기안에 들어가 있는 것들은 제외시킬 수 있다.
나는 이거말고 여기에 공백을 제거하고 싶다. 그러면 \s를 표시하면 된다. 즉 ^\s이니까 공백을 제거한다는 뜻이다.
하지만 첫번째두번째를 보면 공백이 없기 때문에 하나의 #태그로 친다.
그래서 ^\s#해서 같이 끊어준다.
자 이렇게 해서 해쉬태그를 선택하는 정규표현식을 찾았다.
<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>
[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의
리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다., 새로 만나는 제로초의 리액트 노드버
www.inflearn.com
'React > NodeBird(ZeroCho)' 카테고리의 다른 글
saga 설치 & generator 이해하기 (0) | 2021.10.28 |
---|---|
redux-thunk 이해하기 (0) | 2021.10.28 |
리덕스의 원리와 불변성 (0) | 2021.10.26 |
redux설치 (0) | 2021.10.26 |
회원가입 페이지 만들기(커스텀 훅) (0) | 2021.09.17 |