[JavaScript] 정규 표현식

JavaScript 정규 표현식

o 정규 표현식 (Regular Expression)

• 문자열의 패턴을 표현하기 위한 도구
• 문자열 안에서 특정 패턴을 갖는 문자열을 검색/추출/치환하는 등의 처리를 코드를 직접 작성하지 않고도 구현 가능
• 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현 가능
• 그러나, 정규표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 단점이 있음

o 정규 표현식의 생성

• RegExp 생성자 또는 정규 표현식 리터럴로 생성할 수 있음
• 예제 - "abc"라는 문자열을 포함한다는 패턴 생성

// RegExp 생성자로 생성
// 생성자의 인수로 패턴을 넘겨야 함
var reg = new RegExp("abc");

// 정규 표현식 리터럴로 생성
// 패턴의 앞뒤를 / 문자로 묶어줘야 함
var reg = /abc/;

o 패턴 매칭

• 정규 표현식과 일치(Match)하는지 확인
• 즉, 어떤 문자열이 정규 표현식이 표현하는 문자열의 패턴을 가지고 있는지 확인
• 예제 - 회원가입 화면에서 사용자로 부터 입력 받는 전화번호가 유효한지 체크

var tel = '0101234567팔';
var myRegExp = /^[0-9]+$/;
 
console.log(myRegExp.test(tel)); // false

o RegExp 객체의 메서드

• test 메서드
• 정규 표현식 문자열이 일치하는지 뜻하는 논리값 반환

var reg = /cat/;
console.log(reg.test("cats and dogs"));    // true
console.log(reg.test("Cat"));              // false

• exec 메서드
• 정규 표현식과 일치하는 문자열을 검색하여 일치한 문자열을 배열로 반환
• 일치하는 문자열을 못찾으면 null 반환

var reg = /Script/;
var result = reg.exec("JavaScript");
console.log(result[0]);                    // Script

var result2 = reg.exec("Java");
console.log(result[0]);                    // null

• 프로퍼티
• index - 가장 처음 일치한 위치
• input - 일치한 문자열

console.log(result.index);    // 4
console.log(result.input);    // "JavaScript"

• search 메서드
• 인수로 받은 정규 표현식 객체와 일치한 최초 문자열의 첫 번째 문자 위치를 반환

var s = "1 little,2 little indian";
console.log(s.search(/little/));    // 2 : 일치한 최초 문자열의 첫번째 문자 위치
console.log(s.search(/\d/));        // 0 : 일치한 최초 문자열의 첫 번째 문자 위치
console.log(s.search(/\bindian/));  // 18 : 일치한 i의 위치
console.log(s.search(/3\s/));       // -1 : 일치하지 않음

• replace 메서드
• 첫 번째 인수로 받은 정규 표현식과 일치하는 문자열을 검색하고,
  두 번째 인수로 받은 문자열로 치환한 새로운 문자열 반환

var s = "1 little,2 little indian";
console.log(s.replace(/indian/, "boy"));    // 1 little,2 little boy
console.log(s.replace(/little/, "big"));    // 1 big,2 little indian
console.log(s.replace(/little/g, "big"));   // 1 big,2 big indian

• 치환 패턴
• $n - 정규 표현식 안에 소괄호를 사용하여 그룹화한 n번째 부분 정규 표현식과 일치한 문자열이 들어가며,
  n에는 0 ~ 9999 사이의 값을 넣을 수 있음

// 전화번호 첫 번째 "0" 을 "+82-"로 치환
var person = "Tom, tom@example.com, 010-1234-5678";
var result = person.replace(/0(\d{1,4}-\d{1,4}-\d{1,4})/g, "+82-$1");
console.log(result);    // Tom, tom@example.com, +82-10-1234-5678

// 날짜 서식 치환
var date = "오늘은 2016년9월10일입니다.";
var result = date.replace(/(\d+)년(\d+)월(\d+)일/, "$1/$2/$3");
console.log(result);    // 오늘은 2016/9/10 입니다.

// 성과 이름을 맞바꿈
var name = "Tom Sawyer";
var result = name.replace(/(\w+)\s(\w+)/, "$2 $1");
console.log(result);    // Sawyer Tom

• $& - 일치한 부분 문자열이 들어감

• match 메서드
• 첫번째 인수로 받은 정규 표현식과 일치하는 문자열을 순서대로 저장해서 배열로 반환

var url = /\b(\w+):\/{2}([\w.]+)\/(\S*)\b/;
var text = "Tom의 홈페이지 URL은 http://www.example.com/~tom 입니다.";
console.log(text.match(url));

• split 메서드
• 첫번째 인수로 문자열을 분할한 다음에 배열에 담아서 반환

// IP주소를 .으로 분리한 배열을 반환
"172.20.51.65".split(".");     // ["172", "20", "51", "65"]

## 아래의 console 결과를 예측해보자 !!

var targetStr = 'This is a pen.';
var regexr = /is/ig;

// RegExp 객체의 메소드
console.log(regexr.exec(targetStr));
console.log(regexr.test(targetStr));

// String 객체의 메소드
console.log(targetStr.match(regexr));
console.log(targetStr.replace(regexr, 'IS'));
console.log(targetStr.search(regexr));
console.log(targetStr.split(regexr));

o 플래그

• 플래그는 옵션이므로 선택적으로 사용
• 플래그를 사용하지 않으면 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번째 매칭한 대상만을 검색하고 종료

Flag	Meaning	Description
i	Ignore Case	대소문자 구별하지 않고 검색
g	Global	전역 검색 즉, 문자열 내 모든 패턴 검색
m	Multi Line	여러 줄 검색 수행. ^와 $는 각각 행의 시작과 끝이라는 뜻
y		시작 위치 고정 검색 (ES6)
u		정규 표현식 패턴을 내부적으로 유니코드 코드 포인트 열로 처리 (ES6)

var targetStr = 'Is this all there is?';
var regexr = /is/;

console.log(targetStr.match(regexr)); // [ 'is', index: 5, input: 'Is this all there is?' ]

regexr = /is/ig;

console.log(targetStr.match(regexr)); // [ 'Is', 'is', 'is' ]

o 메타 문자

• 정규표현식에서 사용하는 특수 문자

^ $ \ . * + ? ( ) [ ] { } |

• 위 메타 문자들을 문자로 표기하려면 앞에 \ 문자를 붙여서 이스케이프 해야 함

o 문자 클래스

• 문자 클래스는 특정 문자 집합 안의 모든 단일 문자와 일치
• 예시

정규 표현식	설명
[abc]	'a', 'b', 'c' 중 문자 한 개와 일치
[0123456789]	숫자로 해석될 수 있는 문자 한 개와 일치
[a-z]	전체 소문자 중 문자 한 개와 일치
[abcx-z]	a, b, c, x, y, z 중 문자 한 개와 일치
[a-zA-Z0-9]	모든 알파벳과 숫자 중 문자 한 개와 일치
[ㄱ-ㅎ가-힣]	모든 한글 문자 중 문자 한 개와 일치
[0-9a-zA-Z]+(.[_a-z0-9-]+)*@(?:\\w+\\.)+\\w+$	이메일 형식: 아이디@도메인
^\\d{2,3}\\d{3,4}\\d{4}$	전화번호 형식: 중간에 '-'로 연결
[^...]	부정 문자 클래스. 대괄호 안에 없는 단일 문자와 일치

• 문자 클래스의 단축 표기

정규 표현식 예시	설명
/c.t/	"cat", "cute" 등과 일치. "action", "condition"과는 일치하지 않음
/c..t/	"hot and cool" 등과 일치. "cols", "console"과는 일치하지 않음
\d	숫자 한 개와 일치. [0123456789]의 단축 표기
\D	숫자 외 문자와 일치. [^0123456789]의 단축 표기
\w	모든 영어 단어 문자. [a-zA-Z0-9_]의 단축 표기
\W	영어 단어 문자가 아닌 문자와 일치. [^a-zA-Z0-9_]의 단축 표기
\s	모든 공백 문자(공백, 탭 개행)와 일치
\S	공백 문자가 아닌 문자와 일치

• 반복 패턴

정규 표현식 예시	설명
{m, n}	최소 m번, 최대 n번 반복
{n,}	바로 앞의 요소를 최소 n번 반복
{n}	바로 앞의 요소를 n번 반복
?	최대 한 번 반복. {0, 1} 과 같음
+	최소 한 번 이상 반복. {1,} 과 같음
*	최소 0번 반복. {0,} 과 같음
(반복 문자)?	최소한으로 반복. 반복 문자 뒤에 ? 를 붙여줌

• 그룹화와 참조
• 정규  표현식의 패턴 요소를 소괄호로 묶으면 부분적으로 그룹화 가능

var bark = /bow+(woo+f)+/;
console.log(bark.test("bowwoofwoofwooofwoooof"));  // true

• 위치를 기준으로 매칭
• 문자열의 위치를 패턴으로 지정하는 앵커라는 문자가 존재

정규 표현식	설명	예제
^	문자열의 시작 위치	var jsFirst = /^JavaScript/; console.log(jsFirst.test("JavaScript is powerful"));  // true console.log(jsFirst.test("I love JavaScript"));  // false
$	문자열의 마지막 위치	var jsLast = /JavaScript$/; console.log(jsLast.test("JavaScript is powerful"));  // false console.log(jsLast.test("I love JavaScript"));  // true
\b	영어 단어의 경계	console.log(/\bcat\b/.test("저는 cat 을 좋아합니다."));  // true
\B	영어 단어 경계 외의 위치	/\Bdog/ -> "dog"나 "I love dog"와는 일치하지 않는다
(?=pattern)	전방 탐색	console.log(/Java(?=Script)/.exec("I like JavaScript"));  // ["Java"] console.log(/Java(?=Script)/.exec("I like JavaCoffee"));  // null
(?!pattern)	전방 부정 탐색	console.log(/Java(?!Script)/.exec("I like JavaScript"));  // null console.log(/Java(?!Script)/.exec("I like JavaCoffee"));  // ["Java"]