2. JavaScript Regular expression - FE

1) 정규표현식이란?

정규표현식 (regular expression)

• 문자열의 특정 패턴을 찾을 수 있는 문법입니다.
• 패턴을 찾아서 추출, 삭제, 치환 등의 문자열 조작을 할 수 있습니다.

실무에서의 사용

• 몇 가지 유용한 사례 입니다.
  • 이메일, 주소, 전화번호 규칙 검증
  • textarea에 입력된 것 중 불필요한 입력값 추출
  • 트랜스파일링: 트랜스 파일링은 최근에 자바스크립트 개발이 ECMA 스크립트가 6, 7, 8 이렇게 나가면서 현대화된 개발 문법을 브라우저가 지원되지 않기 때문에 그 문법을 변환시켜주는 어떤 로그들을 만들 필요가 있습니다. 그 도구에서 예를 들어서 이런 걸, 최근 문법에 쓴 개발 코드가 있는데 그 코드를 실제 브라우저에서 동작 가능한 코드로 변경한다거나 그런 작업을 할 때, 즉 소스코드를 읽어들여서 그 부분에 어떤 문법을 현재 지원되는 문법으로 변환해야 되는 그런 경우가 있을 수 있습니다. 그런 것들도 문자열 조작일 수 있죠.
  • 개발 도구에서의 문자열 치환
• 언어마다 다르지만 자바스크립트는 문자열 기준으로 match()라는 메서드가 있습니다.

간단한 사용법

숫자 찾기

"1".match(/1/);
"1".match(/1/)[0];	"1"
"1".match(/2/);	null
"a52b".match(/52/);

 

• / /하면 정규 표현식을 뜻합니다. 여기서는 52에 해당하는 것만 a52b에서 52만 추출해서 결과를 보여주고 있습니다.
• 그런데 중요한 것은 52가 아닌 다양한 숫자가 있을 수 있습니다. a99b처럼 99가 있을 수도 있고요. 그러면 이때는 해당하는 값이 없습니다. 이럴 때는 문자열 안에 있는 모든 숫자, digit을 찾을 수 있는 기호를 사용합니다. 정규 표현식에서는 ＼d라고 표시합니다.
  

 

• 다음과 같이 표현도 가능합니다.
  

공부 방법

• 다양한 cheat sheet를 참고해서 정규표현식을 구현하는 것이 좋습니다.
  • javascript regex cheat sheet
  • 패턴들을 테스트해보면서 구현해보기

예제(실습할만한)

우편번호
우편번호 구/신
둘 다 매칭이 돼야 된다, 그럴 경우에는 OR 연산자를 쓰면 됩니다. OR 연산자는 이렇게 괄호를 써서 우리가 표현을 할 수가 있습니다.
이렇게 괄호를 묶어서 하는 것들을 어떤 블록 영역을 지정하는 거거든요. 이런 거를 하위 표현식, sub expression이라고 합니다. 하위 표현식을 써서, OR 연산자를 써서 이런 식으로 확인을 할 수가 있습니다.
우편번호에서 5자리일 때 맨 앞자리가 9면 안되는 경우 대괄호([ ])는 이 중의 하나라는 의미를 갖고 있습니다. - 표시는 연속된 숫자, 문자를 의미합니다.
핸드폰 전화번호 규칙 콤마로 세 자리에서 네 자리로 이렇게 표현하는 것을 수량자라 합니다. 숫자를 표시할 수가 있습니다.
개발도구에서의 함수 선택 ?를 하면은 물음표 앞의 문자가 하나 있거나 없는 경우를 찾습니다. 공백은 \s로 표시합니다. \w는 대소문자 상관없이 a부터 z까지 그다음에 _까지 포함됩니다.
replace를 하려면 만약에 (\s?)(var)(\s+[$_a-zA-Z]+)에서 var를 const로 바꾸겠다. 그럴 경우에는 똑같은 문법을 써서 그대로 패턴을 유지하면서 부분적으로 바꿔줘야 되는데 이거 지금 제가 하위 표현식이라고 하는 괄호로 표현한 세 덩어리 중에 가운데 부분만 바꿔놓은 거겠죠? 그래서 앞에 부분은 그대로 두고 뒤에도 그대로 두지만 가운데를 const로 바꾸겠다 그러면은 자바스크립트도 이런 식으로 지원을 하는데 서브라임에서도 아마 이게 $로 표시가 됩니다. $1 그다음에, 괄호는 필요 없죠. const 다음은 $2일까요? 3이죠. $1const$3 이렇게 순서대로 $1, $2, $3 해서 이런 식으로 replace를 할 수가 있습니다. replace all을 하면 다음과 같이 나옵니다.

 

치환

replace Method 011을 010으로 바꾸기. $1이 가리키는 것은 첫번째 괄호를 뜻하거든요. 그래서 괄호가 그대로 유지되고 그다음에 세 번째 숫자가 0이야 이런 식으로 치환을 할 수가 있습니다. .*(greedy)는 조건에 맞는 문자열을 최대한 많이 찾으려고 합니다.
ES6 arrow function 치환하기	실습 요망

 

출처: https://www.debuggex.com/cheatsheet/regex/javascript

탐욕적(greedy), 게으른(lazy) 수량자

• 뒤에서부터 찾거나, 앞에서부터 찾거나 (lazy를 써서 앞에서부터 찾도록 합니다.)
  • greedy : *, +, {n,}
  • lazy : *?, +?, {n,}?
• 예를 들어서 이 * 다음에 + 이런 것들이 일반적인 수량자라 그러는데 뒤에 ?를 붙이면 또 다른 의미를 갖습니다.
• +는 하나 이상 올 때 사용합니다.

참고 자료

[참고링크] Regular expression
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp