Recent Posts
Recent Comments
Today
Total
관리 메뉴

Free Code

[javascript] 정규식 / 정규표현식 Regex 본문

카테고리 없음

[javascript] 정규식 / 정규표현식 Regex

reecoder 2024. 5. 13. 21:32

 

정규표현식이란?

 

 

    • 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어

 

 

1) 정규 표현식 리터럴을 이용한 생성 방식

 

 

  • 리터럴
    • 변수의 값이 변하지 않는 데이터 그 자체.
    • / 와 / 사이에 검색랑 문자열 패턴을 넣고 / 슬래시가 끝나는 순서에 필요에 따라 플래그를 추가할 수 있다.
    • 리터럴을 사용하는 것이 일반적인 방법 -> 정규표현식 객체가 생성된다.

 

 

 

  • 플래그
    • 선택적으로 사용
    • 순서와 상관없이 하나이상의 플래그를 동시에 설정할 수 있다.
    • 플래그를 사용하지 않는 경우에는 문자열 내 검색 대상이 1개 이상이더라도 첫번째 조건대상만을 검색하고 종료하게 된다.

 

예 )

 

i (ignore case) : 대소문자를 구별하지 않고 검색한다.

g (global) : 문자열 내의 모든 패턴을 검색한다.

m (multi line) : 문자열의 행이 바뀌더라도 검색은 계속한다.

s : .​(모든 문자 정규식)이 개행 문자 \n도 포함하도록

u (unicode) : 유니코드 전체를 지원

y (sticky) :문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화

 

 

  • 패턴
    • 매칭하여 검색하고 싶은 문자열을 지정, 따옴표는 생략
    • 정규 표현식 패턴을 작성할 때는 일반 문자와 특수 문자를 사용할 수 있는데, 일반 문자는 리터럴 문자 / 특수 문자는 메타 문자로 표현한다.

 

    • 리터럴 문자 (정규 문자) : 일반 문자, \0, \n, \t, \v, \f, \r, \xhh, \uhhhh, \cX
    • 메타 문자 (정규 표현식의 구문 문자) : ^ $ \ . * + ? ( ) [ ] { } |_

 

 

  • 메타문자
    • 정규표현식 패턴을 만들 때 사용할 수 있는 특정 패턴을 기술하는 문자
    • 조금 더 복잡하고 다양한 케이스의 경우를 다룰 때 사용되는 것
    • 메타 문자는 굉장히 다양하게 있기 때문에 모든 메타 문자를 외울수는 없고 필요할 때 찾아서 사용한다.

 

 
사진 삭제

사진 설명을 입력하세요.


 

2) RegExp 생성자 함수 방식

바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우에 사용하는 것이 좋다.

 

 

  • 정규식 RegExp.prototype의 메서드

 

exec

    • 일치하는 정보가 있을 경우 그에 대한 정보를 담은 배열을 반환
    • 일치하는 정보가 없을 경우 null을 반환
// 정규 표현식 정의
const regex = /(\d+)/;
// 문자열 내에서 하나 이상의 연속된 숫자들을 찾아내는 데 사용

// '/' 정규 표현식의 시작과 끝 '/'
// (...): 캡처 그룹
// 캡처 그룹은 정규 표현식의 일부분을 그룹화하여, 나중에 찾은 부분을 따로 참조할 수 있다.
// \d : "digit"을 의미하는 메타문자로, 0부터 9까지의 어떤 숫자 하나와 일치
// + :  하나 혹은 그 이상 연속적으로를 의미
// 숫자가 하나 이상 연속적으로 있어야 한다.

// 대상 문자열
const str = "Example string with numbers 12345 and symbols";

// exec 메소드 실행
const result = regex.exec(str);

if (result) {
    console.log("Found:", result[0]); // 전체 일치 항목
    console.log("First capture group:", result[1]); // 첫 번째 캡처 그룹
} else {
    console.log("No match found.");
}

 

 

test

    • 단순히 패턴의 존재 여부만 필요할 때
// 정규 표현식 정의
const regex = /\d+/; // 하나 이상의 숫자를 포함하는 패턴

// 테스트할 문자열
const str1 = "Hello World!";
const str2 = "There are 123 apples.";

// test 메소드 실행
const result1 = regex.test(str1); // str1에 대한 테스트
const result2 = regex.test(str2); // str2에 대한 테스트

console.log("String 1 contains numbers:", result1); // false
console.log("String 2 contains numbers:", result2); // true
 

 

  • 문자열 String.prototype의 메서드

 

match

    • 문자열에 정규 표현식을 적용하여 해당하는 모든 매치를 찾다. 매치된 결과는 배열로 반환
const str = "The rain in SPAIN stays mainly in the plain";
const result = str.match(/ain/g); // ["ain", "ain", "ain"]
 

search

    • 정규 표현식과 일치하는 부분의 인덱스를 반환 일치하는 부분이 없으면 -1을 반환
const str = "Hey there!";
const index = str.search(/there/); // 4
 

replace

    • 문자열에서 정규 표현식(또는 하위 문자열)과 일치하는 부분을 새로운 문자열로 대체
const str = "Visit Microsoft!";
const newStr = str.replace("Microsoft", "W3Schools"); // "Visit W3Schools!"
 

split

    • 문자열을 지정된 구분자로 나누어 배열로 반환 구분자는 문자열이나 정규 표현식이 될 수 있다
const str = "apple, banana, kiwi";
const parts = str.split(", "); // ["apple", "banana", "kiwi"]
 

 

 

  • 헷갈리는 것 / 개인적인 정리

 

const regexCapture = /(foo) (bar) \1 \2/;
const str = "foo bar foo bar";
const matchCapture = str.match(regexCapture);
console.log(matchCapture); // ["foo bar foo bar", "foo", "bar"]

const regexNonCapture = /(?:foo) (?:bar) foo bar/;
const matchNonCapture = str.match(regexNonCapture);
console.log(matchNonCapture); // ["foo bar foo bar"]
 

캡처 그룹 (Capturing Group)

 

(pattern)

 

  • 캡처 그룹은 괄호로 묶인 부분의 패턴을 그룹화하고, 정규 표현식에 의해 매칭된 부분 문자열을 캡처(저장) -> 이를 통해 나중에 이 부분에 대한 참조나 다시 사용이 가능하다.

 

  • (abc)는 "abc"와 일치하고, 일치하는 부분을 캡처한다. 이를 통해 추후에 백레퍼런스(예: \1)나 다른 메소드에서 이 그룹을 참조할 수 있다.

 

 

비캡처 그룹 (Non-Capturing Group)

(?:pattern)

 

  • 비캡처 그룹은 괄호를 사용하여 패턴을 그룹화하지만, 일치하는 부분 문자열을 캡처하지 않는다. 이는 그룹화의 이점은 취하되, 캡처로 인한 메모리 사용을 줄이고자 할 때 유용하다.

 

  • (?:abc)는 "abc"와 일치하지만, 일치하는 부분을 캡처하지 않는다. 이 패턴은 참조나 재사용을 위한 캡처가 필요 없는 경우에 적합하다.

 

 

  • 참고

https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

 

정규 표현식 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 노란색 강조 부분은 다음 정규식을 사용했을 때 매치된 것이다. 스티븐 클레이니는 정규 표현식의 개념을 설립한 공로자이다. 정규 표현식(正規表現式, 영어: r

ko.wikipedia.org

 

https://velog.io/@purplew/Javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D#-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%98-%EC%83%9D%EC%84%B1

 

Javascript에서 정규표현식(Regular Expression) 사용하기

자바스크립트의 정규표현식 개념과 자주 사용되는 패턴에 대한 활용 예시

velog.io

 

https://zephyrus1111.tistory.com/310

 

[정규 표현식] 메타 문자 알아보기

이번 포스팅에서는 정규 표현식 패턴의 기본이라고 할 수 있는 메타 문자에 대해서 알아보려고 한다. - 목차 - 1. 메타 문자란? 2. 검사 범위가 자동 지정 메타 문자 3. 수량 지정 메타 문자 4. 검사

zephyrus1111.tistory.com

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

 

📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제

정규 표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은

inpa.tistory.com