자바스크립트에도 정규식이 있다고???

https://koreanraichu.tistory.com/118

정규식(Regular Expression)-기호와 메타문자

여기서 정규식이 대충 와일드카드 같은거고(글은 분량상 두개로 나눴음) 파이썬에서는 re모듈을 쓴다고 했는데, 사실 파이썬 뿐 아니라 자바스크립트에서도 정규식을 쓸 수 있다. 정규표현식, 그러니까 정규식은 파이썬만의 전유물이 아니기때문에 다른 언어에서도 사용하는 방법이 다를 뿐이지 일단 쓸 수는 있다.

---

정규식에 대해 설명하면서 대충 '와일드카드 같은 것'이라고 했는데, 이런식빵 저런식빵을 모두 식빵 한방에 찾게 해 주는 매우 놀랍고 유용한 것이다.

 

See the Pen RegularExpression_RegExp 1 by koreanraichu (@koreanraichu) on CodePen.

아, 참고로 배열은 

const pokemon_list = ['김부추씨','박숟갈씨','스미스샹델라','스미스루나톤','스미스솔록','박팬텀씨','김쪽파얼갈이김치','김메탕','최팬텀']

얘다. 아니 이름이 다 왜이래 붙일거 없으면 김씨 붙여서요 

 

아니 이런거 말고 다른거 없어요? 이 정규식을 유효성 검사에 활용할 수 있다면 어떰? 유효성 검사는 되게 간단한건데 여러분들도 많이 봤던 그거다. 회원가입 할 때 이메일 입력하다 삐끗했더니 올바른 이메일이 아닙니다! 올바른 아이디가 아닙니다! 이러는거 있잖음? 그거 말고 입력 다 해주세요 이런거. 그것도 유효성 검사다. 입력을 '제대로' 했는지 확인하는 것.

 

See the Pen RegularExpression 2 by koreanraichu (@koreanraichu) on CodePen.

정규식을 이용해 이메일 주소라는 걸 알 수 있는 건, 메일주소에 패턴이 있기 때문이다. 대부분의 메일 주소는 아이디@도메인이고 도메인은 뭐시기닷컴 뭐시기닷넷 이런 식으로 온점이 하나씩 들어간다. 그러니까 yourid@naver.com 이런 형식을 가지고 있다 이거지. 그래서 정규식 패턴이

const mail_check = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/

이렇게 된다. 이게 뭔 소리냐... 영대 영소 숫자 언더바 하이픈(둘 다 아이디에 많이 씀)이 오고 다음에 앳(@, 골뱅이)이 붙고 그 뒤에 영대 영소 숫자 하이픈 그리고 쩜 하고 다시 영대 영소 숫자가 메일 주소 형식이라고 알려주는거다.

 

See the Pen RegularExpression 3 by koreanraichu (@koreanraichu) on CodePen.

여기서는 전화번호가 나온다. 전화번호는 패턴이 어떤가요? 010-1234-5678 이런 식으로 숫자 세개 하이픈 숫자 네개 하이픈 숫자 네개다. 그럼 정규식으로 전화번호를 어떻게 짜나요?

const phone_pattern = /\d{3}-\d{3,4}-\d{4}/

이렇게 짠다. 저기에 왜 3,4가 들어가냐면 옛날에는 국번 세자리도 있었다.

 

const bread_array = ['이런식빵','밤식빵','붕어빵','조런식빵','팥빵','크림빵','슈크림빵']

const regex = new RegExp('식빵');

for (let i of bread_array) {
  console.log(regex.test(i))
}

regex(위에 RegExp 쟤).test는 true, false로 출력해주고

const bread_array = ['이런식빵','밤식빵','붕어빵','조런식빵','팥빵','크림빵','슈크림빵']

const regex = new RegExp('식빵');

for (let i of bread_array) {
  console.log(regex.exec(i))
}

얘는 Null or 배열로 뽑아준다.

const bread_array = ['이런식빵','밤식빵','붕어빵','조런식빵','팥빵','크림빵','슈크림빵']

const regex = new RegExp('식빵');
const cream = /크림/

for (let i of bread_array) {
  console.log(regex.exec(i),cream.exec(i))
}

이렇게 하면 식빵이 있거나 크림이 있으면 배열이 나오고, 둘 다 없으면 널만 두 개 나온다.

const bread_array = ['이런식빵','밤식빵','붕어빵','조런식빵','팥빵','크림빵','슈크림빵']

const regex = new RegExp('식빵');
const cream = /크림/

for (let i of bread_array) {
  console.log(i.match(regex),i.match(cream))
}

match도 배열로 돌려주는 건 맞는데 위에 두 놈이랑 순서가 다르다. test나 exec는 패턴.test(문자열)이고 match는 문자열.match(패턴)이라 주의해야 한다. 순서 뻑나면 당연하게도 에 ㅋ 러 ㅋ

 

const bread_array = ['이런식빵','밤식빵','붕어빵','조런식빵','팥빵','크림빵','슈크림빵','달빵','땅콩크림빵','딸기크림빵']

const regex = new RegExp('[^식]빵');

for (let i of bread_array) {
  if (regex.test(i)) {
    console.log(i)
  }
}

매우 당연하지만 이런 식으로 식빵 빼는 것도 된다. (대괄호 안에 꺾쇠는 저거 빼고 찾으라는 얘기)

const bread_array = ['풀빵','이런식빵','밤식빵','붕어빵','조런식빵','팥빵','크림빵','슈크림빵','달빵','땅콩크림빵','딸기크림빵']

const regex = new RegExp('[^식|크림]빵');

for (let i of bread_array) {
  if (regex.test(i)) {
    console.log(i)
  }
}

OR과 조합하면 식빵 크림빵을 다 뺄 수 있다. 이런 식으로 정규식의 메타문자와 사용법을 익혀두면 패턴이 존재하는 문자열에 한해서 정규식으로 패턴을 짜서 그것만 필터링할 수 있다. 왜 네이버 블로그에서 뭐 찾을 때

이런거 빼고 찾는것처럼 말이다.