정규 표현식(Regular Expression)

정규식(Regular Expression) 은 문자열에서 특정  내용을 찾거나 대체 또는 발췌하는데 사용된다.

 

1. 정규표현식 어디서 봤을까..?

대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은 값을 입력하면 정규표현식에 의해 필터링되어 걸러져 경고창을 띄우는 화면!을 본적이 있을 것이다.

2. 정규표현식 왜 쓰는 걸까?

이 처럼 반복문과 조건문을 사용해야 할 것 같은 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할 수 있으며,

주로 다음과 같은 상황에서 굉장히 유용하게 사용된다.

3. 정규표현식 언제 (유용하게) 사용될까?

> 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때

> 사용자가 입력한 이메일 휴대폰 번호, ip 주소등이 올바른지 검증하고 싶을 때

> 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때

> 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 싶을 때

// 회원가입 할때 휴대폰번호 양식 검사
// 예를 들어 010-1111-2222 라는 전호번호는
// "숫자3개", "-", "숫자4개", "-", "숫자4개" 로 이루어져 있는데,

const regex = /\d{3}-\d{4}-\d{4}/; 
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.) 

regex.test('010-1111-2222') // true; 
regex.test('01-11-22') // false;

보면 알겠지만 정규표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 단점이 있다.

 

4. 정규식 구성 ?

정규식 구성코드는 

슬래쉬 문자 2개 사이로 정규식 기호가 들어가는 형태이다. 뒤의 i는 정규식 플래그이다.

 

// 리터럴 방식
const regex = /abc/;

// 생성자 방식
const regex = new RegExp("abc");
const regex = new RegExp(/abc/); // 이렇게 해도 됨

 

대부분의 언어의 정규식 문법은 비슷하다!

 

5.정규식 메서드!?

위의 정규표현식을 가지고 이메일이나 전화번호 매칭 필터링을 하기 위해선 자바스크립트 정규식 메서드를 이용하여 패턴을 검사하고, 매칭되는 문자열 추출,변환한다.

 

 

메서드	의미
("문자열").match(/정규표현식/플래그)	"문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
("문자열").replace(/정규표현식/, "대체문자열")	"정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
("문자열").split(정규표현식)	"문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환
(정규표현식).test("문자열")	"문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
(정규표현식).exec("문자열")	match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

 

// 정규표현식을 담은 변수
const regex = /apple/; // apple 이라는 단어가 있는지 필터링

// "문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
regex.test("Hello banana and apple hahahaha"); // true

// "문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
const txt = "Hello banana and apple hahahaha";
txt.match(regex); // ['apple']

// "정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
txt.replace(regex, "watermelon"); // 'Hello banana and watermelon hahahaha'

정규식 플래그

정규식 플래그는 정규식을 생성할 때 고급 검색을 위한 전역 옵션을 설정할 수 있도록 지원하는 기능이다.

// flags 에 플래그 문자열이 들어간다.
cosnt flags = 'i';
const regex = new RegExp('abapplec', flags);

// 리터럴로 슬래쉬 문자뒤에 바로 표현이 가능
const regex1 = /apple/i;
const regex2 = /apple/gm;

g : 전역 검색

• 전역 검색 플래그가 없는 경우에는 최초 검색 결과 한번만 반환하는 반면,
• 전역 검색 플래그가 있는 경우에는 모든 검색 결과를 배열로 반환

// `a`가 두 개 포함된 문자열
const str = "abcabc";

// `g` 플래그 없이는 최초에 발견된 문자만 반환
str.match(/a/); // ["a", index: 0, input: "abcabc", groups: undefined]

// `g` 플래그가 있으면 모든 결과가 배열로 반환
str.match(/a/g); // (2) ["a", "a"]

 

ref:https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC#%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D_%EC%97%B0%EC%8A%B5_%EC%98%88%EC%A0%9C