💡정규 표현식(Regular Expression) - 패턴과 플래그

1. 정규 표현식(Regular Expression)이란?

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

• ‘regexp’ 또는 'reg’라고 줄여서 사용
• 구성 : 패턴(pattern) & 플래그(flag)
• 기능
  1) 문자 검색(search)
  2) 문자 추출(extract)
  3) 문자 치환(replace)
  • 반복문과 조건문 없이 패턴을 가진 문자열을 간단하게 검색, 추출, 치환할 수 있다.
  • E-mail 형식검사, Password 검사(유효성 검사) 등의 복잡한 문자 일치 기능 등을 빠르게 수행할 수 있다.

2. 패턴과 플래그

1) 패턴(Pattern) :: 💡필수

: 문자열의 일정한 규칙을 표현

• 패턴은 /로 열고 닫으며, 문자열의 따옴표는 생략한다.
• 따옴표를 포함하면 따옴표까지도 패턴에 포함되어 검색된다.
• 패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현 가능 하다.

📌 패턴표 참고
정규표현식 (Regex) 정리
[JavaScript] 정규 표현식(RegExp) 사용하기 (개념편)
✅ 패턴은 모두 외울 수 없으니 필요할 때 표를 참고하여 작성!

[예제]

개별 숫자 - /[0-9]/ // 0부터 9사이의 숫자 찾기
개별 문자 - /[to]/ // t 또는 o가 들어간 문자 찾기
단어 - /filter/ // filter라는 단어(통째로) 찾기
핸드폰 번호 - /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/
/*
숫자 01로 시작 /
그 후에 0,1,6,7,8,9 중에 하나가 올 수도 있고 /
하이픈(-)이 1개 올 수도 있고 / 
0부터 9사이의 숫자가 3~4개 / 
하이픈(-)이 1개 올 수도 있고 / 
0부터 9사이의 숫자가 4개로 끝
*/

2) 플래그(Flag) :: 선택사항

: 정규 표현식의 검색 방식을 설정

• 원하는 문자 검색 결과를 반환하도록 할 수 있다.
• 정규 표현식의 옵션으로서, 꼭 설정하지 않아도 된다.
• 하나 이상의 플래그를 동시에 설정할수도 있다.
• 순서는 상관없다.

g(global) 플래그

: 모든 문자를 검색

g가 없으면 원래는 처음 발견된 결과만 출력된다.
g가 있으면 있는 모든 검색 결과를 배열로 반환한다.

str = 'Hi wecode! I am code kim.';
const regexp1 = /code/; // we'code'
const regexp2 = /code/g; // we'code', 'code' kim

i(ignoreCase) 플래그

: 영어 대소문자를 구분하지 않음(무시함)

i가 없으면 원래는 code와 Code는 다르다. ==> 대소문자를 구분함!
ig를 같이 사용하게 되면 대소문자 구분없이 표현식의 모든 검색결과를 배열로 반환한다.

m(multi line) 플래그

: 문자열의 행이 바뀌더라도 패턴 검색을 계속함

y(sticky) 플래그

: lastIndex 속성을 이용해 원하는 위치에서 검색을 시작

const str = "Cats love cats, and we love cats."
const regExp = /cats/igy;
exp.lastIndex = 4; // index 4 이후부터 검색

⬇️

lastIndex를 지정한 뒤 플래그 y로 검색하면, 그 위치에서 검색이 시작된다.

u(unicode) 플래그

: 유니 코드 문자를 처리

s(single line) 플래그

: 개행(\n)을 무시하여 단일 라인으로 취급

최근에는 많은 브라우저에서 사용되지 않음 !

3. 선언 방식 (문법)

1) 리터럴(Literal) 방식

: 거의 대부분 리터럴 방식을 이용함. 정적인 방식.

const regexp1 = /pattern/; // --> /패턴/ (플래그 ❌)
const regexp2 = /pattern/gmi; // --> /패턴/플래그 (플래그 g, m, i ⭕️)

2) 생성자 함수 RegExp 방식

: 상황에 따라 '동적'으로 생성된 문자열을 가지고 정규 표현식을 만들어야 할 때 사용. ${...} 이용 가능.

const regexp1 = new RegExp("pattern", "flags");
const regexp2 = new RegExp("^abc", "gi");

let tag = prompt("어떤 태그를 찾고 싶나요?", "h2");
let regexp = new RegExp(`<${tag}>`);
// 프롬프트에서 "h2"라고 대답한 경우, /<h2>/와 동일한 역할을 합니다.

4. 정규 표현식 관련 메소드

1) 검색 : string.match()

• 검색, 추출 메소드
• str.match(regExp) == 문자열 str에서 regExp와 일치하는 결과를 배열로 반환
• 매칭 결과가 없는 경우 null 반환 (빈 배열 [ ] ❌)
• flag 'g'와 함께 많이 사용

ex)
let str = "We will, we will rock you";
alert( str.match(/we/gi) ); // We, we

2) 치환 : string.replace()

• 치환, 대체 메소드
• str.replace(regexp, replacement) == 문자열 str 내 regExp에 일치하는 부분 문자열을 replacement로 치환
• flag 'g' 가 있다면, 모든 부분 문자열이 교체되고, 아니면 첫 번째 부분 문자열만 교체됨

ex)
let str = "We will, we will";

// 플래그 g 없음
alert( str.replace(/we/i, "I") ); // I will, we will
// 플래그 g 있음
alert( str.replace(/we/ig, "I") ); // I will, I will

3) 일치 여부 확인 : regExp.test()

• 일치 여부 확인(Boolean) 메소드
• regexp.test(str) == regExp와 일치하는 부분 문자열이 있다면 true, 없다면 false 반환
• if문을 활용해, 유효성 검사에 자주 쓰임
• 괄호 안이 문자열(str)임 ⭐️

ex)
let str = "I love JavaScript";
let regexp = /LOVE/i;

alert( regexp.test(str) ); // true

5. 자주 쓰는 정규표현식 패턴

이메일 형식 검사

const exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
    if (exptext.test(check.value) == false) {
        //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우			
        alert("입력한 메일형식이 올바르지 않습니다.");
        check.focus();
        return false;
    }

핸드폰 번호

const regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;

ID 형식 검사

//사용자가 입력한 ID가 한글이 포함되어 있는지 Check 합니다.
function idCheck () {  
    // 입력한 ID를 Check하기 위해 가져옵니다.
    var titleCheck = $("titleId").val;
    // 정규표현식으로 한글만 선택하도록 만듭니다.
    var languageCheck = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
    // 입력한 ID와 정규표현식을 비교하여 한글 여부를 판단합니다.
    // test외에도 search ,exec , match등을 사용할 수 있습니다.
    if (languageCheck.test(titleCheck)) {
        alert("ID에 한글이 포함되어 있습니다.");
        return;
    }

💡 정규표현식 test 사이트 ➪ https://regexr.com

📍참고사이트
https://www.codeguage.com/courses/regexp/flags
https://valuefactory.tistory.com/151
정규표현식 (Regex) 정리
[JavaScript] 정규 표현식(RegExp) 사용하기 (개념편)
https://ko.javascript.info/regexp-introduction