16. JavaScript 정규 표현식 완벽 가이드 | 웹 개발 기초

디스토피아 스타일, dall-e

 

JavaScript 정규 표현식 완벽 가이드: 기본부터 활용까지

 

01. 서론

1) JavaScript 정규 표현식 소개

JavaScript 정규 표현식(Regular Expressions, RegEx)은 문자열 내 특정 패턴을 찾고, 일치시키며, 추출하거나 교체하는 데 사용되는 강력한 도구입니다. 정규 표현식은 문자열을 검색하고 조작하는 다양한 작업에서 매우 유용하게 사용되며, 간결하고 효율적인 방법으로 복잡한 문자열 처리를 가능하게 합니다.

 

정규 표현식은 /pattern/flags 형태로 작성됩니다. 예를 들어, 문자열 내에서 "hello"라는 단어를 찾기 위해 /hello/라는 정규 표현식을 사용할 수 있습니다.

const text = "hello world";
const regex = /hello/;
console.log(regex.test(text)); // true

위 예제에서 test() 메서드는 문자열 내에 "hello"가 존재하는지 확인하여, 존재하면 true, 없으면 false를 반환합니다.

2) 정규 표현식의 중요성과 활용 분야

정규 표현식은 다음과 같은 다양한 분야에서 중요하게 활용됩니다:

• 입력 검증: 사용자 입력 데이터의 유효성을 검사하는 데 사용됩니다. 예를 들어, 이메일 주소, 전화번호, 우편번호 등의 형식을 검증할 수 있습니다.

const email = "example@example.com";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test(email)); // true

• 문자열 검색 및 추출: 특정 패턴을 찾아 추출하는 데 유용합니다. 예를 들어, HTML 문서에서 특정 태그를 찾거나 로그 파일에서 특정 정보를 추출할 수 있습니다.

const log = "User: John, Age: 30, Location: NY";
const ageRegex = /Age: (\d+)/;
const match = log.match(ageRegex);
console.log(match[1]); // 30

• 문자열 치환 및 포맷팅: 특정 패턴을 찾아 다른 문자열로 대체하거나, 문자열의 형식을 변환하는 데 사용됩니다.

const text = "The quick brown fox jumps over the lazy dog.";
const newText = text.replace(/quick/, "slow");
console.log(newText); // "The slow brown fox jumps over the lazy dog."

• 데이터 정리 및 변환: 데이터 분석 과정에서 정규 표현식을 사용하여 텍스트 데이터를 정리하고 변환할 수 있습니다. 예를 들어, CSV 파일의 데이터를 정리하거나 JSON 데이터를 파싱하는 데 유용합니다.

 

02. 정규 표현식의 기본

1) 정규 표현식의 정의

정규 표현식(Regular Expression, RegEx)은 문자열 내 특정 패턴을 찾고 조작하기 위한 강력한 도구입니다. 정규 표현식은 문자열을 검색, 일치, 추출 및 수정하는 데 사용되며, 간결하고 효율적인 방법으로 복잡한 문자열 처리를 가능하게 합니다. 정규 표현식은 특정 패턴을 정의하는 문자열로, 다양한 특수 문자와 메타 문자를 사용하여 복잡한 검색 조건을 설정할 수 있습니다.

 

예를 들어, 특정 단어를 포함하는 모든 문자열을 찾고자 할 때 정규 표현식을 사용할 수 있습니다. 아래는 "hello"라는 단어를 포함하는 문자열을 찾기 위한 정규 표현식의 예시입니다.

const regex = /hello/;
const text = "hello world";
console.log(regex.test(text)); // true

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

JavaScript에서는 정규 표현식을 두 가지 방법으로 생성할 수 있습니다: 정규 표현식 리터럴과 RegExp 객체.

정규 표현식 리터럴

정규 표현식 리터럴은 슬래시(/)로 감싸진 패턴으로 작성됩니다. 리터럴 방식은 주로 간단한 패턴을 정의할 때 사용됩니다.

const regex = /hello/;
const text = "hello world";
console.log(regex.test(text)); // true

RegExp 객체

RegExp 객체를 사용하여 정규 표현식을 생성할 수도 있습니다. RegExp 생성자는 패턴과 선택적으로 플래그를 매개변수로 받습니다. 이 방법은 동적으로 정규 표현식을 생성할 때 유용합니다.

const pattern = "hello";
const regex = new RegExp(pattern);
const text = "hello world";
console.log(regex.test(text)); // true

플래그 사용

정규 표현식에는 다양한 플래그를 사용할 수 있습니다. 플래그는 정규 표현식의 동작 방식을 제어하는 옵션으로, 리터럴과 RegExp 객체 모두에서 사용할 수 있습니다. 주요 플래그는 다음과 같습니다:

• g (global): 문자열 내 모든 패턴을 찾습니다.
• i (ignoreCase): 대소문자를 구분하지 않고 패턴을 찾습니다.
• m (multiline): 여러 줄에서 패턴을 찾습니다.

const regex = /hello/gi;
const text = "Hello world! hello again!";
console.log(text.match(regex)); // ["Hello", "hello"]

 

03. 정규 표현식 작성 방법

1) 간단한 패턴 작성

정규 표현식의 기본적인 사용 방법은 간단한 패턴을 작성하여 문자열을 검색하는 것입니다. 예를 들어, 특정 단어를 찾거나 숫자, 문자 등을 검사하는 데 사용할 수 있습니다.

문자열 검색

const text = "hello world";
const regex = /hello/;
console.log(regex.test(text)); // true

숫자 검색

const text = "There are 123 apples";
const regex = /\d+/; // \d는 숫자를 의미, +는 하나 이상의 숫자를 찾음
console.log(regex.test(text)); // true
console.log(text.match(regex)); // ["123"]

문자 검색

const text = "abc123";
const regex = /[a-c]/; // a부터 c까지의 문자를 찾음
console.log(regex.test(text)); // true
console.log(text.match(regex)); // ["a"]

2) 특수 문자와 메타 문자

정규 표현식에서는 다양한 특수 문자와 메타 문자를 사용하여 복잡한 패턴을 정의할 수 있습니다. 주요 특수 문자와 메타 문자는 다음과 같습니다:

특수 문자

• .: 임의의 단일 문자와 일치합니다.

const regex = /.ello/;
console.log(regex.test("hello")); // true
console.log(regex.test("mello")); // true
console.log(regex.test("cello")); // true

• \d: 숫자와 일치합니다.

const regex = /\d/;
console.log(regex.test("abc123")); // true

• \w: 알파벳 대소문자, 숫자, 언더스코어(_)와 일치합니다.

const regex = /\w/;
console.log(regex.test("hello_world123")); // true

• \s: 공백 문자와 일치합니다.

const regex = /\s/;
console.log(regex.test("hello world")); // true

• \b: 단어 경계를 나타냅니다.

const regex = /\bword\b/;
console.log(regex.test("word")); // true
console.log(regex.test("word123")); // false

메타 문자

• ^: 문자열의 시작을 나타냅니다.

const regex = /^hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false

• $: 문자열의 끝을 나타냅니다.

const regex = /world$/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false

• *: 0개 이상의 반복을 나타냅니다.

const regex = /ab*c/;
console.log(regex.test("ac")); // true
console.log(regex.test("abc")); // true
console.log(regex.test("abbc")); // true

• +: 1개 이상의 반복을 나타냅니다.

const regex = /ab+c/;
console.log(regex.test("ac")); // false
console.log(regex.test("abc")); // true
console.log(regex.test("abbc")); // true

• ?: 0개 또는 1개의 반복을 나타냅니다.

const regex = /ab?c/;
console.log(regex.test("ac")); // true
console.log(regex.test("abc")); // true
console.log(regex.test("abbc")); // false

• {n}: 정확히 n개의 반복을 나타냅니다.

const regex = /a{2}/;
console.log(regex.test("aa")); // true
console.log(regex.test("aaa")); // true
console.log(regex.test("a")); // false

• {n,}: 최소 n개의 반복을 나타냅니다.

const regex = /a{2,}/;
console.log(regex.test("aa")); // true
console.log(regex.test("aaa")); // true
console.log(regex.test("a")); // false

• {n,m}: 최소 n개, 최대 m개의 반복을 나타냅니다.

const regex = /a{2,3}/;
console.log(regex.test("aa")); // true
console.log(regex.test("aaa")); // true
console.log(regex.test("aaaa")); // false

 

04. JavaScript에서 정규 표현식 사용

1) exec() 메서드

exec() 메서드는 정규 표현식과 일치하는 배열을 반환하며, 일치하는 항목이 없으면 null을 반환합니다. 이 메서드는 반복적으로 호출하여 문자열 내에서 여러 번 일치하는 항목을 찾을 수 있습니다.

const regex = /hello/g;
const text = "hello world! hello universe!";
let match;
while ((match = regex.exec(text)) !== null) {
  console.log(`Found ${match[0]} at index ${match.index}`);
}
// Found hello at index 0
// Found hello at index 13

2) test() 메서드

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

const regex = /hello/;
const text = "hello world";
console.log(regex.test(text)); // true
console.log(regex.test("world")); // false

3) match(), matchAll() 메서드

match() 메서드는 문자열에서 정규 표현식과 일치하는 모든 결과를 배열로 반환합니다. matchAll() 메서드는 모든 일치 항목의 Iterator를 반환합니다.

const regex = /hello/g;
const text = "hello world! hello universe!";
const matches = text.match(regex);
console.log(matches); // ["hello", "hello"]

const matchAll = text.matchAll(regex);
for (const match of matchAll) {
  console.log(match[0], match.index);
}
// hello 0
// hello 13

4) replace(), replaceAll() 메서드

replace() 메서드는 정규 표현식과 일치하는 문자열을 다른 문자열로 대체합니다. replaceAll() 메서드는 모든 일치 항목을 대체합니다.

const text = "hello world! hello universe!";
const newText = text.replace(/hello/g, "hi");
console.log(newText); // "hi world! hi universe!"

const newTextAll = text.replaceAll("hello", "hi");
console.log(newTextAll); // "hi world! hi universe!"

5) search() 메서드

search() 메서드는 정규 표현식과 일치하는 첫 번째 항목의 인덱스를 반환합니다. 일치하는 항목이 없으면 -1을 반환합니다.

const regex = /world/;
const text = "hello world";
console.log(text.search(regex)); // 6
console.log("hello universe".search(regex)); // -1

6) split() 메서드

split() 메서드는 정규 표현식을 기준으로 문자열을 분할하여 배열로 반환합니다.

const regex = /\s+/;
const text = "hello world universe";
const words = text.split(regex);
console.log(words); // ["hello", "world", "universe"]

 

05. 고급 사용법

1) 플래그 사용법

정규 표현식에는 다양한 플래그를 사용하여 정규 표현식의 동작 방식을 제어할 수 있습니다. 주요 플래그는 다음과 같습니다:

• g (global): 문자열 내 모든 패턴을 찾습니다.
• i (ignoreCase): 대소문자를 구분하지 않고 패턴을 찾습니다.
• m (multiline): 여러 줄에서 패턴을 찾습니다.
• s (dotAll): 점(.) 문자가 줄바꿈 문자를 포함하여 모든 문자와 일치하도록 합니다.
• u (unicode): 유니코드 모드를 활성화합니다.
• y (sticky): 정확히 위치한 패턴을 찾습니다.

const regex = /hello/gi;
const text = "Hello world!\nhello universe!";
console.log(text.match(regex)); // ["Hello", "hello"]

2) 유니코드 정규 표현식

유니코드 플래그(u)를 사용하면 유니코드 문자를 정규 표현식으로 처리할 수 있습니다. 유니코드 정규 표현식을 사용하면 보다 정확한 문자 매칭이 가능합니다.

const regex = /\u{1F600}/u; // 유니코드 문자 "😀"
const text = "Here is a smiley: 😀";
console.log(regex.test(text)); // true

3) 정규 표현식에서 그룹과 역참조

정규 표현식에서 그룹은 소괄호(())로 묶어서 정의할 수 있으며, 역참조는 백슬래시(\)와 그룹 번호로 참조할 수 있습니다. 그룹과 역참조를 사용하면 정규 표현식 내에서 특정 부분을 캡처하고 재사용할 수 있습니다.

그룹 사용 예제

const regex = /(hello) (world)/;
const text = "hello world";
const match = text.match(regex);
console.log(match[1]); // "hello"
console.log(match[2]); // "world"

역참조 사용 예제

역참조를 사용하면 이전에 일치한 그룹을 재사용할 수 있습니다. 예를 들어, 동일한 단어가 반복되는 패턴을 찾는 방법은 다음과 같습니다:

const regex = /(\b\w+\b) \1/;
const text = "hello hello world";
console.log(regex.test(text)); // true

const regex2 = /(\b\w+\b) \1/;
const text2 = "hello world world";
console.log(regex2.test(text2)); // true

 

06. 실용적인 예제

1) 입력 검증 예제

정규 표현식은 사용자 입력 데이터를 검증하는 데 매우 유용합니다. 예를 들어, 사용자 이름, 비밀번호, 주소 등의 입력 형식을 확인할 수 있습니다. 다음은 간단한 사용자 이름 검증 예제입니다.

 

사용자 이름 검증

사용자 이름은 알파벳 대소문자, 숫자, 언더스코어(_)로만 구성되어야 하며, 3자 이상 16자 이하이어야 합니다.

const username = "user_123";
const usernameRegex = /^[a-zA-Z0-9_]{3,16}$/;
console.log(usernameRegex.test(username)); // true

2) 전화번호 유효성 검사 예제

전화번호 유효성 검사는 다양한 형식을 지원해야 합니다. 예를 들어, 국제 전화번호 형식, 지역 전화번호 형식 등을 검증할 수 있습니다. 다음은 한국의 전화번호 형식을 검증하는 예제입니다.

 

한국 전화번호 유효성 검사

한국 전화번호는 010, 011, 016, 017, 018, 019 등으로 시작하며, 총 11자리 숫자로 구성됩니다.

const phoneNumber = "010-1234-5678";
const phoneRegex = /^01[0-9]-\d{3,4}-\d{4}$/;
console.log(phoneRegex.test(phoneNumber)); // true

3) 이메일 주소 검증 예제

이메일 주소는 일반적으로 사용자 이름, '@' 기호, 도메인 이름으로 구성됩니다. 다음은 이메일 주소의 기본적인 유효성 검사를 수행하는 예제입니다.

 

이메일 주소 검증

이메일 주소는 알파벳 대소문자, 숫자, 점(.), 하이픈(-), 언더스코어(_)를 포함할 수 있으며, '@' 기호와 도메인 이름이 있어야 합니다.

const email = "example@example.com";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test(email)); // true

위 예제에서 ^[^\s@]+@[^\s@]+\.[^\s@]+$ 정규 표현식은 다음과 같은 규칙을 따릅니다:

• ^[^\s@]+: 시작 부분은 공백과 '@' 기호를 제외한 한 글자 이상의 문자로 구성되어야 합니다.
• @: '@' 기호가 있어야 합니다.
• [^\s@]+\.: '@' 기호 이후에는 공백과 '@' 기호를 제외한 한 글자 이상의 문자와 점(.)이 있어야 합니다.
• [^\s@]+$: 마지막 부분은 공백과 '@' 기호를 제외한 한 글자 이상의 문자로 구성되어야 합니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.10 - [Study] - 12. JavaScript 함수의 모든 것 | 웹 개발 기초

12. JavaScript 함수의 모든 것 | 웹 개발 기초

2024.07.10 - [Study] - 11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

11. JavaScript 반복문 완벽 가이드 | 웹 개발 기초

2024.07.05 - [Study] - 10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)