본문 바로가기
프로그래밍/JavaScript

Javascript 정규표현식 기본기 익히기

by 꾸션 2023. 3. 14.

정규표현식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 바꾸기 위해 사용하는 패턴 매칭 기술입니다. 자바스크립트에서는 RegExp 객체를 사용하여 정규표현식을 다룰 수 있습니다. 정규표현식은 다양한 문자열 처리 작업에서 매우 유용하며, 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에서도 널리 사용됩니다.

이번 블로그 글에서는 자바스크립트에서 정규표현식을 사용하는 방법에 대해 다루어보겠습니다.

문자열을 선언할때 '를 사용하고, 정규표현식은 /를 사용합니다. 이 점을 기억하시면 벌써 반은 알고 들어가는 겁니다.

/패턴/
정규표현식 표현 방법

// 일반 문자열 선언
const str = 'hello';

// 정규표현식 선언방법1 
const pattern1 = /hello/;

// 정규표현식 선언방법2: RegExp객체로 정규표현식 선언(패턴을 변경할 일이 있을 경우에 사용)
const pattern2 = new RegExp('hello');

위와 같이 문자열과 정규표현식은 비슷한 구조이지만, 정규표현식은 슬래시 안에 패턴이 들어간다는 점만 꼭 기억하시고, 아래의 글을 읽어 나가시기 바랍니다. (여기서는 정규표현식 선언방법 1번으로 다루겠습니다.)

RegExp객체에 대한 참조는 아래의 링크를 참조하세요.

RegExp - JavaScript | MDN

RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다.

developer.mozilla.org

1. 정규표현식 기본 문법

정규표현식 리터럴과 RegExp 객체

정규표현식은 슬래시(/)로 감싸서 표현식을 작성할 수 있습니다. 이를 정규표현식 리터럴이라고 합니다. 예를 들어, /hello/라는 표현식은 "hello"라는 문자열과 일치하는 문자열을 찾습니다.

RegExp 객체를 사용하여 정규표현식을 생성할 수도 있습니다. new RegExp('hello')와 같이 생성할 수 있습니다.

문자열 매칭

정규표현식을 사용하여 문자열에서 특정 패턴을 찾을 수 있습니다. 예를 들어, /hello/라는 표현식은 "hello"라는 문자열과 일치하는 문자열을 찾습니다. 이를 텍스트 매칭이라고 합니다.

대소문자 구분

정규표현식은 대소문자를 구분합니다. 예를 들어, /hello/라는 표현식은 "hello"라는 문자열과 일치하지만, "Hello"나 "HELLO"와는 일치하지 않습니다.

문자집합과 범위

정규표현식은 문자집합과 범위를 표현할 수 있습니다. 대괄호([]) 안에 문자나 범위를 나열하여 표현합니다. 예를 들어, [abc]라는 표현식은 "a", "b", "c" 중 하나와 일치하는 문자열을 찾습니다. [a-z]라는 표현식은 알파벳 소문자 중 하나와 일치하는 문자열을 찾습니다.

선택적 문자

정규표현식은 선택적인 문자를 나타내기 위해 물음표(?)를 사용합니다. 예를 들어, /colou?r/라는 표현식은 "color"나 "colour"와 일치하는 문자열을 찾습니다.

숫자와 문자 클래스

정규표현식은 숫자나 특정 문자 클래스와 일치하는 문자열을 찾을 수 있습니다. \d는 숫자를 나타내며, \w는 알파벳, 숫자, 밑줄(_)을 나타냅니다.

2. 정규표현식 메서드

exec()

exec() 메서드는 문자열에서 정규표현식과 일치하는 첫 번째 문자열을 찾습니다. 이 메서드는 일치하는 문자열을 반환하며, 반환된 값에는 일치하는 문자열과 그룹 정보가 포함됩니다.

test()

test() 메서드는 문자열에서 정규표현식과 일치하는 문자열이 있는지 여부를 확인합니다. 일치하는 문자열이 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

match()

match() 메서드는 문자열에서 정규표현식과 일치하는 문자열을 모두 찾아 배열로 반환합니다. 반환된 배열에는 일치하는 문자열과 그룹 정보가 포함됩니다.

search()

search() 메서드는 문자열에서 정규표현식과 일치하는 첫 번째 문자열의 위치를 반환합니다. 일치하는 문자열이 없으면 -1을 반환합니다.

replace()

replace() 메서드는 문자열에서 정규표현식과 일치하는 문자열을 찾아 다른 문자열로 교체합니다. 이 메서드는 일치하는 문자열을 모두 교체합니다.

split()

split() 메서드는 문자열을 지정한 정규표현식으로 분할하여 배열로 반환합니다. 예를 들어, /,/라는 표현식을 사용하면 쉼표로 분할된 문자열 배열을 반환합니다.

// 문자열
let str = 'hello world';
// 정규표현식
let pattern = /hello/;

// 정규표현식 패턴을 사용해 문자열 매칭하기
console.log(pattern.test(str)); // true

// 문자열에서 일치하는 문자열 찾기
console.log(str.match(pattern));
// [ 'hello', index: 0, input: 'hello world', groups: undefined ]

// 문자열 치환하기
console.log(str.replace(pattern, 'hi'));
// hi world

3. 특수문자

. (마침표)

마침표(.)는 임의의 문자를 나타냅니다. 예를 들어, /a.b/라는 표현식은 "a"와 "b" 사이에 어떤 문자가 와도 일치합니다.

* (별표)

별표(*)는 0개 이상의 문자를 나타냅니다. 예를 들어, /a*b/라는 표현식은 "ab", "b", "aab", "abbbb" 등과 일치합니다.

+ (덧셈 기호)

덧셈 기호(+)는 1개 이상의 문자를 나타냅니다. 예를 들어, /a+b/라는 표현식은 "ab", "aab", "abbbb" 등과 일치하지만, "b"와 같이 "a"가 없는 문자열과는 일치하지 않습니다.

? (물음표)

물음표(?)는 0개 또는 1개의 문자를 나타냅니다. 예를 들어, /a?b/라는 표현식은 "ab"와 "b"와 일치합니다.

^ (캐럿)

캐럿(^)은 문자열의 시작을 나타냅니다. 예를 들어, /^hello/라는 표현식은 "hello world"와 일치하지만, "world hello"와는 일치하지 않습니다.

$ (달러 기호)

달러 기호($)는 문자열의 끝을 나타냅니다. 예를 들어, /world$/라는 표현식은 "hello world"와 일치하지만, "world hello"와는 일치하지 않습니다.

( ) (괄호)

괄호는 그룹을 나타냅니다. 예를 들어, /(hello)/라는 표현식은 "hello"와 일치하는 문자열을 찾지만, 그룹 정보도 반환합니다.

[ ] (대괄호)

대괄호는 문자 집합을 나타냅니다. 예를 들어, [abc]라는 표현식은 "a", "b", "c" 중 하나와 일치하는 문자열을 찾습니다.

{ } (중괄호)

중괄호는 반복을 나타냅니다. {n}은 n번 반복하는 것을 나타내며, {n,m}은 n번부터 m번까지 반복하는 것을 나타냅니다. 예를 들어, /a{2}/라는 표현식은 "aa"와 일치하는 문자열을 찾으며, /a{2,4}/는 "aa", "aaa", "aaaa"와 일치하는 문자열을 찾습니다.

\ (역슬래시)

역슬래시()는 특수문자를 이스케이프하여 문자 그대로 해석하도록 합니다. 예를 들어, /\./라는 표현식은 실제 마침표(.)와 일치하는 문자열을 찾습니다.

4. 패턴 매칭 예제

이메일 주소 매칭

이메일 주소를 찾는 정규표현식은 다음과 같습니다.

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

전화번호 매칭

전화번호를 찾는 정규표현식은 다음과 같습니다.

/^\d{3}-\d{3,4}-\d{4}$/

주민등록번호 매칭

주민등록번호를 찾는 정규표현식은 다음과 같습니다.

/^\d{6}-[1-4]\d{6}$/

URL 매칭

URL을 찾는 정규표현식은 다음과 같습니다.

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

5. 정규표현식을 활용한 문자열 처리 예제

문자열에서 특정 패턴 추출하기

정규표현식을 사용하여 문자열에서 특정 패턴을 추출할 수 있습니다. 예를 들어, /[0-9]+/라는 표현식은 문자열에서 숫자를 추출합니다.

문자열에서 HTML 태그 제거하기

정규표현식을 사용하여 문자열에서 HTML 태그를 제거할 수 있습니다. 예를 들어, /<\/?[^>]+>/gi라는 표현식은 문자열에서 모든 HTML 태그를 제거합니다.

문자열에서 모든 숫자 제거하기

정규표현식을 사용하여 문자열에서 모든 숫자를 제거할 수 있습니다. 예를 들어, /[0-9]/g라는 표현식은 문자열에서 모든 숫자를 제거합니다.

문자열에서 대소문자 변환하기

정규표현식을 사용하여 문자열의 대소문자를 변환할 수 있습니다. 예를 들어, /[a-z]/g라는 표현식은 문자열에서 모든 소문자를 찾아 대문자로 변환합니다. 반대로 /[A-Z]/g라는 표현식은 문자열에서 모든 대문자를 찾아 소문자로 변환합니다.

결론

이번 블로그 글에서는 자바스크립트에서 정규표현식을 사용하는 방법에 대해 알아보았습니다. 정규표현식은 문자열 처리 작업에서 매우 유용한 도구로, 다양한 문자열 처리 작업에 적용할 수 있습니다. 정규표현식의 문법과 메서드, 특수문자, 그리고 실제 활용 예제까지 다양한 내용을 다루었으니, 이를 참고하여 자바스크립트에서 정규표현식을 적극적으로 활용해 보시기 바랍니다.

반응형

댓글