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

 

정규표현식이란?

 

 

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

 

 

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

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

 

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) 사용하기

 

https://zephyrus1111.tistory.com/310

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

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 정규 표현식 문법 총정리 + 응용 예제