[JavaScript] RegExp 정규표현식 : 문자열 패턴 분석의 핵심 가이드!

 

유효성 검사를 할 때 계속 검색하여 알아보고 사용하는 것보다는 내가 블로그를 정리하여 내가 모를 때 찾아보거나

지금 이 포스팅으로 인해 정규표현식을 익힐라고 작성하게 되었습니다.

빠르게 사용할 수 있는 자주 사용하는 패턴들도 작성하게 되었으니 필요할 때마다 사용하면 좋겠습니다.

 

 

 

 

정규표현식을 사용하는 이유

 

문자열 일치 및 검색하기 위해서

정규표현식은 다양한 패턴을 정의하여 문자열을 더 유연하게 처리할 수 있습니다.

예를 들어, 이메일 주소에서 도메인 이름을 추출하는 작업을 정규표현식을 사용하여 간단하게 수행할 수 있습니다.

const email = 'example@gamail.com';
const domainPattern = /@([A-Za-z0-9.-]+)/;
const domainName = email.match(domainPattern)[1];

console.log(domainName); 
// 출력
// gamail.com

 

 

문자열 대체 및 변환하기 위해서

정규표현식을 사용하면 복잡한 문자열 검색이나 대체 작업을 빠르게 수행할 수 있습니다.

예를 들어, 웹 문서에서 특정 단어를 모두 찾아 대체하거나 강조 표시하는 작업을 정규표현식을 사용하여 간단하게 수행할 수 있습니다.

const text = '여기는 zi존코딩맨 개발블로그입니다.';
const targetWord = /zi존코딩맨/;
const newText = text.replace(targetWord, '최고개발자가될 사람의');

console.log(newText);
// 출력
// 여기는 최고개발자가될 사람의 개발블로그입니다.

 

 

유효성 검사 및 데이터 정제하기 위해서

입력 데이터의 유효성을 검사하거나 원하는 형식과 일치하는지 확인할 때 사용합니다.

예를 들어, 사용자가 입력한 폼 데이터가 올바른 이메일 주소 형식인지 검사하거나 숫자로만 구성되어 있는지 확인하는 작업을 정규표현식을 사용하여 간단하게 수행할 수 있습니다.

const userInput = 'user@example.com';
const emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z]{2,}$/i;
const isValidEmail = emailPattern.test(userInput);

console.log(isValidEmail); 
// 출력
// true

 

 

 

 

정규표현식의 문자들

 

기본 사용 문자

표현식	사용 예시	설명
^	/^a/	a로 시작하는 경우를 알아낸다.
$	/a$/	a로 끝나는 경우를 알아낸다.
[]	/[abc]/	abc라는 문자열 중 해당하는 문자가 하나라도 존재하는 것을 알아낸다.
[ - ]	/[A-Z]/ 또는 /[가-힣]/	해당 범위 안에 있는 모든 것을 알아낸다.
{ }	{6} {2,5} {2, } {,5}	6자리 글자 2자리 이상 5자리 이하의 글자 2자리 이상 글자 5자리 이하 글자
.	/^...$/	개행문자를 제외한 모든 문자.  즉, 영어, 특수문자, 한글이 해당된다.
+	/^[0-9]+$/	한글자 이상이다.  즉, 0글자가 아니다.
[^]	/[^a]/	a를 제외한 모든 글자를 알아낸다.

 

메타 문자

표현식	사용 예시	설명
\d	/^\d{2}/	숫자로 이루어진 2자리를 의미한다.
\D	/^\D{2}/	숫자를 제외한 모든 문자로 이루어진 2자리를 의미한다.
\w	/^\w{2}/	영문자, 숫자, _ 로 이루어진 2자리를 의미한다.
\W	/^\W{2}/	영문자, 숫자, _ 를 제외한 모든 문자로 이루어진 2자리를 의미한다.
\s	/^\s{2}/	공백문자(띄어쓰기, 탭, 줄바꿈)으로 이루어진 2자리를 의미한다.
\S	/^\S{2}/	공백문자(띄어쓰기, 탭, 줄바꿈)을 제외한 모든 문자로 이루어진 2자리를 의미한다.

 

수량 문자

표현식	사용 예시	설명
*	/^*$/	기본 사용 문자인 (+) 와 다르게 0글자 이상된다. 즉, 0글자도 들어올 수 있다.
?	/^[0-9]?$/	0글자 또는 1글자 이다.  즉, 2글자 이상은 안된다.

 

플래그

표현식	사용 예시	설명
i	/coasis/i	coasis문자열에서 대소문자를 구분하지 않고 해당 문자열을 찾습니다.
g	/coasis/g	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색하여 배열로 반환합니다.
m	/coasis/m	문자열의 행이 바뀌더라도 패턴 검색을 계속합니다.

 

 

플래그 g, m 사용 예시 코드

// 플래그 g
const inputString = 'coasis is a great place to learn coasis programming. coasis rocks!';
const regex = /coasis/g;
const matches = inputString.match(regex);

console.log(matches); 
// 출력
// ["coasis", "coasis", "coasis"]


// 플래그 m
const inputString = `
coasis is a great place to learn
coasis programming.
coasis rocks!
`;

const regex = /coasis/m;
const matches = inputString.match(regex);

console.log(matches); 
// 출력
// ["coasis", "coasis", "coasis"]

 

 

 

 

이렇게 해서 정규표현식에 사용되는 문자들을 알아보았습니다.

표만 주어지고 알아서 쓰라고 하면 모르는 사람은 도대체 어떻게 쓰란거야!!! 라고 생각하실 수 있습니다.

그래서 가이드를 드리겠습니다.   순서대로 따라오면 사용하는 데 문제는 없으실 겁니다.

 

 

 

 

 

 

정규표현식 가이드

 

• 1단계 )  // : 정규표현식 틀
• 2단계 )  /^$/ : ^ 시작부터  $ 끝 까지
• 3단계 )  /^[]$/ : [ ] 내의 문자 중 하나라도 존재할 경우
• 4단계 )  /^[a-z]$/ : 소문자 a부터 소문자 z까지 찾겠다.
• 5단계 )  /^[a-zA-Z]$/ : 추가로 대문자 A~Z 까지 찾겠다.
• 6단계 )  /^[a-zA-Z0-9]$/ : 추가로 0~9 의 숫자를 찾겠다.
• 7단계 )  /^[a-zA-Z0-9]{5,12}$/ : 글자 수는 5이상 12이하인지 체크하겠다.

 

결론 : 영문 대소문자와 숫자로 이루어진 5~12글자의 문자열을 찾는 패턴입니다.

 

 

 

 

 

정규식이랑 사용하는 메서드 모음

 

정규표현식 객체 생성

let regExp = new RegExp('정규표현식');            // 방법1
let regExp = /정규표현식/;                        // 방법2

 

 

RegExp에서 제공하는 메서드

 

[ 정규식.test(문자열) ]

문자열에서 정규식 값과 일치하는 값이 있으면 true, 없으면 false를 반환합니다.

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

console.log(regExp.test(target));
// 출력
// true

 

 

[ 정규식.exec(문자열) ]

문자열에서 정규식 값과 일치하는 값이 있으면 처음 매칭된 문자열을 반환하고 없으면 null을 반환합니다.

const target = 'Is this all there is?';
const regExp = /is/;
const regExp2 = /IS/;

console.log(regExp.exec(target));
// 출력
// ['is', index: 5, input: 'Is this all there is?', groups: undefined]

console.log(regExp2.exec(target));
// 출력
// null

 

 

 

 

String에서 제공하는 메서드

 

[ 문자열.match(정규식) ]

문자열에서 일치하는 값을 찾아서 반환합니다.

플래그에 /g를 넣어주고 일치하는 값이 여러 개면 배열로 반환되고 플래그가 없으면 처음 나오는 문자열로 반환된다.

const text = 'Hello, world! This is a test string., my world, ,my coasis world';
const pattern = /world/g;

const result = text.match(pattern);
console.log(result); 
// 출력 
// ["world", "world", "world"]

 

 

[ 문자열.search(정규식) ]

문자열에서 정규식 값과 일치하는 값의 시작 인덱스 값을 반환합니다.

const text = "Hello, world! This is a test string., world, world";
const pattern = /world/;

const result = text.search(pattern);
console.log(result); 
// 출력
// 7

 

 

[ 문자열.replace(정규식) ]

문자열에서 정규식 값과 일치하는 첫 번째 부분을 바꿀 값으로 변경해서 반환합니다.

const text = 'Hello, world! This is a test string., world, world';
const pattern = /world/g;                  // 전역 검색을 위해 'g' 플래그 사용
const replacement = 'universe';      // 대체할 문자열

const newText = text.replace(pattern, replacement);
console.log(newText);
// 출력
// Hello, universe! This is a test string., universe, universe

 

 

[ 문자열.split(정규식) ]

정규식에 지정된 값을 구분자로 해서 쪼개진 값들이 담겨있는 배열로 반환합니다.

const text = 'apple, banana, orange, grape';
const delimiter = ', ';                     // 구분자

const fruitsArray = text.split(delimiter);
console.log(fruitsArray);
// 출력
// ['apple', 'banana', 'orange', 'grape']

 

 

 

 

전체 보기

 

function 정규표현식함수(){
    let regExp = new RegExp('script');

    let str1 = 'javascript jquery ajax';
    let str2 = 'java oracle html css';

    // 정규식 메소드
    regExp.test(str1)
    regExp.test(str2)
    regExp.exec(str1)
    regExp.exec(str2)

    // 문자열 메소드
    str1.match(regExp)
    str1.search(regExp)
    str1.replace(regExp, '스크립트')
    str1.split(regExp)
}

/** 출력
regExp.test(str1) : true
regExp.test(str2) : false
regExp.exec(str1) : script
regExp.exec(str2) : null
str1.match(regExp) : script
str1.search(regExp) : 4
str1.replace(regExp, '스크립트') : java스크립트 jquery ajax
str1.split(regExp) : java, jquery ajax
**/

 

 

 

 

 

 

 

 

자주 사용하는 정규 표현식

 

예시	정규 표현식
00년생 이상은 뒷번호가 3,4로 시작, 99년생 이하는 뒷번호가 1,2로 시작하는  주민등록번호	/^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12][0-9]|3[01])-[1-4][0-9]{6}|[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12][0-9]|3[0])-[1-2][0-9]{6})$/ ex) 990909-1080901, 020918-4755212
010로 시작하고중간에 있는 번호가 0000이 아닌  핸드폰번호	/^010-(?!0000)\d{4}-\d{4}$/ ex) 010-3111-1234, 010-9999-2222
사진 파일 jpg, gif, png 만 검사하는  확장자	/([^\s]+(?=\.(jpg|gif|png))\.\2)/ ;
특수문자 포함 여부	/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
기본적인 이메일	/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
숫자만 이루어졌는지 한글로만 이루어 졌는지 영문, 숫자로 함께 이루어졌는지	/^[0-9]+$/ /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/ /^[a-zA-Z0-9]+$/

 

 

 

 

감사합니다.