[JavaScript] 정규 표현식(regular expression)

※해당 글은 하나몬 님의 원글을 바탕으로 수정 추가되었습니다. 맨아래 링크 참고

 

🍕정규 표현식이란(regular rexpression)?

- 일정한 '패턴'을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)이다.

• 정규 표현식은 JS의 고유 문법이 아니며, 대부분의 프로그램 언어와 코드 에디터에 내장되어 있음
• JS(자바스크립트)의 경우, 정규 표현식 문법을 ES3부터 도입했다. 
• 단점) 정규 표현식은 주석이나 공백을 허용하지 않고, 여러 기호를 혼합해 사용하기 때문에 가독성이 좋지 않다.

🍕정규 표현식의 역할

• 문자열을 대상으로 '패턴 매칭 기능'을 제공 (*특정 패턴과 일치하는 문자열을 검색, 추출, 치환(대체)할 수 있는 기능을 말한다.)
• 반복문과 조건문 없이 패턴을 가진 문자열을 간단하게 검색, 추출, 치환할 수 있다.
• 간단한 문자 검색부터 이메일, 패스워드 검사(유효성 검사)등의 복잡한 문자 일치 기능을 정규 표현식으로 수행할 수 있다.
• 문자 검색(search), 문자 추출(extract), 문자 대체(replace) 를 수행한다. 

🍕정규 표현식 생성

정규 표현식을 생성하는 방법은 짧은 문법과 긴 문법으로 크게 두 가지가 있습니다. 

-> 두 문법을 통해 만들어진 결과물은 동일하게 RegExp의 인스턴스가 됩니다. 

 

중요한 차이점은 /... /를 사용하면 문자열 템플릿 리터럴에서 ${...}를 사용했던 것처럼 중간에 표현식을 넣을 수 없다는 점입니다. 슬래시를 사용한 방법은 완전히 정적입니다.

• 슬래시를 사용한 짧은 문법은 코드를 작성하는 시점에 패턴을 알고 있을 때 사용 ( 대다수의 경우 )
• 반면, 긴 문법(생성자 함수 사용)의 경우는 '상황에 따라' 동적으로 생성된 문자열을 가지고 정규 표현식을 만들어야 할때 주로 사용한다. 

let tag = prompt("어떤 태그를 찾고 싶나요?", "h2");

let regexp = new RegExp(`<${tag}>`); // 프롬프트에서 "h2"라고 대답한 경우, /<h2>/와 동일한 역할을 합니다.

-> 짧은문법(리터럴 방식, 슬래시를 쓰는 방식)은 중간에 표현식을 넣을 수 없으므로 위와 같은 경우에는 생성자 함수를 사용해서 정규 표현식을 만든다. 

 

방법1) 리터럴(literal)방식 (a.k.a. 짧은 문법)

- 정규 표현식은 / 로 감싸진 패턴을 리터럴로 사용한다. 

• / 슬래시는 자바스크립트에게 정규 표현식을 생성하고 있다는 것을 알려준다. 문자열에 따옴표를 쓰는 것과 동일한 역할을 한다. 

*리터럴(literal)이란? 
데이터 그 자체를 뜻한다. 변수에 넣는 변하지 않는 데이터를 말한다. 
상수와는 다른 의미이다. 상수는 변하지 않는 변수를 의미한다. (메모리 위치)
리터럴은 변수의 값이 변하지 않는 데이터를 의미한다. (메모리 위치 안에 값)

정규 표현식 리터럴은 패턴(pattern) 과 플래그 (flag)로 구성된다. 

// 정규 표현식의 리터럴 표현 방법
const regexp1 = /^abc/; // --> /패턴/
const regexp2 = /^abc/gi; // --> /패턴/플래그

 

-> 어맇게하면 정규 표현식 객체(obj)가 생성된다. 

• 정규 표현식을 사용할 때는 리터럴을 사용하는 것이 일반적인 방법 
• 때에 따라 RegExp 생성자 함수를 써야하는 경우도 있음

방법2) RegExp 생성자 함수 방식 (a.k.a. 긴 문법)

-RegExp 생성자 함수를 호출하여 RegExp 객체를 생성하는 방법도 있다.

const regexp1 = new RegExp(/^abc/i); // ES6
const regexp2 = new RegExp(/^abc/, 'i');
const regexp3 = new RegExp('/^abc/', 'i');

방법3) 재할당 방식

• 사용중인 정규 표현식을 재할당할 수도 있다. 
• 단, 상수(const)가 아닌 변수(let , var)으로 선언해야 한다. // 상수에 재할당을 하면 TypeError

let regexp1 = /ipsum/g;
regexp1 = /lorem/i;
console.log(regexp1); // -> /lorem/i

---

🍕정규 표현식 JS 속성

- 자바스크립트에서 정규 표현식을 다루는 다양한 속성을 제공

 

🌞.flags

-정규 표현식에서 플래그만 추출할 경우 사용한다. 

-알파벳 순서대로 값을 반환한다.

new RegExp("^abc", "gi").flags;
// "gi"
/^abc/igy.flags;
// "giy"

🌞.source

-정규 표현식에서 패턴만 추출할 경우 사용한다. 

new RegExp("^abc", "gi").source;
// "^abc"
/^abc/igy.source;
// "^abc"

그 외 속성

• .global // global 플래그(g)의 포함 여부를 Boolean type으로 반환한다. 
• .ignoreCase // ignoreCase 플래그(i)의 포함 여부를 Boolean type 으로 반환한다.
• .multiline // multiline 플래그(m)의 포함 여부를 Boolean type 으로 반환한다.
• .sticky // sticky 플래그(y)의 포함 여부를 Boolean type 으로 반환한다.
• .unicode // unicode 플래그(u)의 포함 여부를 Boolean type 으로 반환한다.

---

🍕정규 표현식 JS 메소드 

🌞RegExp.prototype.exec(문자열)

• exec() 메소드는 인자로 전달받은 문자열에 대해 '정규 표현식의 패턴을 검색'하여 매칭 결과를 배열로 반환
• 매칭 결과가 없으면 null 을 반환 
• 주의사항: exec()는 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환한다. 

const target = 'Is this all there is?';
const regExp = /is/;
regExp.exec(target);
// --> ["is", index: 5, input: "Is this all there is?", groups: undefined]

 

🌞RegExp.prototype.test(문자열)

• text 메소드는 인자로 전달받은 문자열에 대해 '정규 표현식의 패턴을 검색'하여 매칭 결과를 Boolean 값으로 반환

const target = 'Is this all there is?';
const regExp = /is/;
regExp.test(target); // --> true

🌞String.prototype.match(정규식)

• String 표준 빌트인 객체가 제공하는 match 메소드는 대상 문자열과 인자로 전달받은 정규 표현식의 매칭 결과를 배열로 반환한다. 
• 매칭 결과가 없는 경우 null 반환 -> 일치하는 부분이 없을 경우 null이 아니라 항상 빈 배열이 되게 하려면 어떻게 해야할까?  아래와 같이 OR 연산자의 추가 기능을 사용하면 됩니다. 

// || [] OR연산자의 추가 기능을 통해서 1번째 truthy를 matches에 반환한다. 
// 즉 정규식의 결과가 null = false 라면 truthy인 [] 빈배열을 matche에 반환합니다. 
// Boolean([]); // true

let matches = "JavaScript".match(/HTML/) || [];
if(!matches.length){
alert('정규표현식과 일치하는 부분 문자열이 없습니다.') 
}

자바스크립트에서 '빌트인'이란?
자바스크립트 코드가 처리되는 영역에 먼저 만들어둔 값, 연산자, 객체를 의미합니다. 
따라서 Number, String, Boolean 이라는 Type은 빌트인 되어있는 값들이다.

const target = 'Is this all there is?';
const regExp = /is/;
target.match(regExp); // !! 헷갈리지 말자. 인자안에 regExp 가 들었다.
// --> ["is", index: 5, input: "Is this all there is?", groups: undefined]

-> exec 메서드와 차이점: String.prototype.match 메서드는 g플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.

nst target = 'Is this all there is?';
const regExp = /is/g;

 

외 여러가지 메소드가 있음 자세한 것은 MDN 참고

---

🍕플래그 (flag) 

• 플래그는 정규표현식의 옵션으로 검색 방식을 설정하기 위해 사용한다.
• 원하는 문자 검색 결과를 반환하도록 할 수 있다. 
• 플래그에 따라 전혀 다른 결과가 나올 수 있다. 
• 플래그는 옵션이므로 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수도 있다.

정규 표현식과 메소드 사용시 '검색 결과의 기본' 
기본적으로 대소문자 구별해서 패턴을 검색한다. 
기본적으로 문자열의 패턴 검색 매칭 대상이 1개 이상 존재해도 첫번째 매칭한 대상만 검색하고 종료

🌞g(global) 플래그 

• 모든 문자를 검색하겠다는 의미
• g가 있는 표현식은 모든 검색 결과를 배열로 반환

🌞i(ignoreCase) 플래그 

• 영어 대소문자를 구분하지 않겠다는 의미 
• ig를 같이 사용하게 되면 대소문자 구분없이 표현식의 모든 검색결과를 배열로 반환

🌞m(multi line) 플래그

• 문자열의 행이 바뀌더라도 패턴 검색을 계속한다는 의미

🌞y(sticky) 플래그

• 생성된 정규 표현식 인스턴스에서는 lastIndex라는 속성을 사용할 수 있다. 

인스턴스(Instance)란? 클래스에 의해 생성되어 메모리에 저장된 실체
객체지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념이다.
클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다. 
인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것에 초점을 맞춘 용어이다.
그렇다면 위에서 말한, '생성된 정규 표현식 인스턴스' 란?
여기에서 인스턴스란 리터럴 방식이든 생성자 함수 방식이든 정규 표현식을 생성한 순간, 그 순간 생성된 객체를 의미한다. 

• lastIndex 속성에 숫자를 지정한 뒤 플래그 y로 검색하면, 그 숫자와 일치하는 index의 문자만 검색한다. 
• 주의점은 lastIndex의 값으로 지정한 index의 위치에 찾고자하는 문자가 있어야 한다는 것(exact position needed) 
• lastIndex 속성은 1회용이며, Read-Only이다.
• 플래그 y와 g를 함께 사용할 경우, 플래그 g는 무시된다. (단독으로 사용할 것을 권고)

const str = "she is she";
const re = /she/y;
console.log(re.lastIndex); // 0
re.lastIndex = 7;
console.log(re.lastIndex); // 7
console.log(str.match(re)); //index 7에 있는 she를 반환

->lastIndex 가 read-only 라는 점에서 해당 속성값을 다르게 지정해봤자 어느 순간 휘발되어 날라가는 거 같다. 콘솔에서 다시 조작해볼 경우,  제대로 작동할 때도 있고 다시 0으로 돌아가는 상황이 종종 발생했다. 

-

 

🌞u (unicode) 플래그

• 유니 코드 문자를 처리하기 위해 필요하다. 

/🐶{2,}/.test("🐶🐶🐶🐶🐶"); // --> false
/🐶{2,}/u.test("🐶🐶🐶🐶🐶"); // --> true

• 패턴 [] 을 이용하여 유니 코드 문자의 범위(구간)을 지정할 수도 있다. 

/[0-9]/.test("5"); // --> true
/[😀-😇]/u.test("😂"); // --> true

---

🍕패턴( = 표현식)

정규표현식? 일정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어
정규 표현식은 패턴 + 플래그 로 구성된다.
패턴: 문자열의 일정한 규칙을 표현
플래그: 정규 표현식의 검색 방식을 설정

🌞패턴의 특징

• 패턴은 / 로 열고 닫으며, 문자열의 따옴표는 생략한다. 
• 따옴표를  포함하면 따옴표까지도 패턴에 포함되어 검색된다.
• 패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현 가능하다. 
• 어떤 문자열 내에 패턴과 일치하는 문자열이 존재할 때, '정규 표현식과 매치한다.'라고 표현한다. 

🌞정규표현식 패턴 종류

표현식	설명
^	문자열의 시작
$	문자열의 종료
.	임의의 한 문자 (문자의 종류 가리지 않음)  단, \ 는 넣을 수 없음
*	앞 문자가 없을 수도 무한정 많을 수도 있음
+	앞 문자가 하나 이상
?	앞 문자가 없거나 하나있음
[]	문자의 집합이나 범위를 나타내며 두 문자 사이는 - 기호로 범위를 나타낸다. []내에서 ^가 선행하여 존재하면 not 을 나타낸다.
{}	횟수 또는 범위를 나타낸다.
()	소괄호 안의 문자를 하나의 문자로 인식
|	패턴 안에서 or 연산을 수행할 때 사용
\s	공백 문자
\S	공백 문자가 아닌 나머지 문자
\w	알파벳이나 숫자
\W	알파벳이나 숫자를 제외한 문자
\d	숫자 [0-9]와 동일
\D	숫자를 제외한 모든 문자
\	정규표현식 역슬래시(\)는 확장 문자  역슬래시 다음에 일반 문자가 오면 특수문자로 취급하고 역슬래시 다음에 특수문자가 오면 그 문자 자체를 의미
(?i)	앞 부분에 (?i) 라는 옵션을 넣어주면 대소문자를 구분하지 않음

🌞자주 쓰이는 패턴 

1) 숫자만 : ^[0-9]*$
2) 영문자만 : ^[a-zA-Z]*$
3) 한글만 : ^[가-힣]*$
4) 영어 & 숫자만 : ^[a-zA-Z0-9]*$
5) E-Mail : ^[a-zA-Z0-9]+@[a-zA-Z0-9]+$
6) 휴대폰 : ^01(?:0|1|[6-9]) - (?:\d{3}|\d{4}) - \d{4}$
7) 일반전화 : ^\d{2,3} - \d{3,4} - \d{4}$
8) 주민등록번호 : \d{6} \- [1-4]\d{6}
9) IP 주소 : ([0-9]{1,3}) \. ([0-9]{1,3}) \. ([0-9]{1,3}) \. ([0-9]{1,3})

 

 

 

 

all ref(모든 출처)

https://highcode.tistory.com/6

[TIP] 정규표현식(Pattern Matching) 완전 정리!

 https://hanamon.kr/javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B0%9C%EB%85%90%ED%8E%B8/

[JavaScript] 정규 표현식(RegExp) 사용하기 (개념편) - 하나몬

https://ko.javascript.info/logical-operators

논리 연산자