[ JavaScript ] 정규식 ( Regular Expression)

들어가기전에

 

정규식은 특정 문자열을 찾고, 이를 특정한 내용을 바꿀 때 "매우 매우" 유용하게 사용됩니다.

실제로 정규식을 사용 하고는 싶었으나 ! 이해가 어려워서 미루고 있던 도중 강의를 만나게 되어 ! 정리를 하게 되었습니다.

  

  

 

1. 정규식 생성하기

 

정규식의 생성은 아래와 같이 "//" 로 감싼 뒤, 변수에 담아두는 방식과

 

const regExp = /abc/;

 

다음과 같이 생성자를 이용하여 만들 수 있습니다.

const regExp = new RegExp("abc");

 

  

  

2. 정규식 사용법

 

특수 문자

 

특수문자는 \(백슬래쉬)를 앞에 붙여 줌으로써, 특수문자가 그대로 사용 될 수 있도록 해야합니다.

const regExp1 = /\*/;
const regExp2 = /\?/;

 

 

플래그

 

조금 더 섬세한 패턴을 찾기 위해서는 마지막 /  뒤에 특정 플래그를 사용합니다.

 

 

- 전역 검색 ( Global )

 

모든 검색 결과를 배열로 반환합니다.

const str = "abcabc"

str.match(/a/g); // (2) ["a", "a"]

 

 

- 대소문자 구분 X

const str = "abcabc"

str.match(/a/g); // (2) ["a", "a"]

 

  

메타문자 

 

- 문자 그룹 ( Character Set ) : []

 

[] 내부의 문자열이 하나라도 일치 하는 값들을 반환 해줍니다 :D

const str = "rad and red";
str.match(/r[ae]d/g);
// (2) ["rad", "red"]

 

이 때, 대괄호 내부에 들어가는 특수문자는 메타 문자로 취급되지 않기 때문에, 별도의 이스케이프를 하지 않아도 됨니다.

const str = "!@#!#@#!";

str.match(/[!.?]/g);

 

문자 그룹에서 연속된 문자열을 보여주고 싶다면, -를 이용해서 간단하게 표현 할 수 있습니다.

const alpha_regExp = /[A-Z]/;

const num_regExp = /[0-9]/;

const han_regExp = /[가-힣]/;

 

  

10진수 문자 ( Digit Character : \d )

 

10진수 문자열을 나타내는 /d 정규식은 위에서 언급했던 [0-9]와 같은 기능을 수행합니다.

 

  

- 단어 문자 ( \w )

 

단어문자는 영어 대,소문자 숫자 그리고 언더스코어를 포함하는 그룹 ( [ 0-9a-zA-z] ) 와 동일한 기능을 수행합니다.

const str = "2021 08 05 kim";

str.match(/w/g);
// 모든 값을 출력

str.match(/W/g);
// 공백만을 출력

 

- 공백 문자 ( \s )

  

공백인 값을 출력하고, S(대문자) 의 경우는 대문자가 아닌 모든 값을 출력합니다.

 

 

  

- 앵커 ( Anchor, ^, $ )

 

앵커는 어떤 특정 위치에서 동작 할지를 제한 하는 역할을 수행합니다.

// 여러 `w` 중에서 문자열의 시작 부분과 일치하는지를 확인합니다
const str = "www";

// 가장 첫 번째 `w` 만 반환됩니다
str.match(/^w/);
// ["w", index: 0, input: "www", groups: undefined]

// 가장 마지막 `w` 만 반환됩니다
str.match(/w$/);
// ["w", index: 2, input: "www", groups: undefined]

보시는 것 처럼 [^] 는 시작 위치를 의미하고, [$] 는 끝을 의미합니다.

 

- 단어 경계 ( \b )

 

다른 단어 문자가 앞이나 뒤에 등장하지 않는 위치임을 나타내는 문자입니다.

const str = "create or ate";

// 'ate' 의 좌우로 단어 문자가 없는 것만을 찾습니다.
str.match(/\bate\b/g);
//[ 'ate' ]

str.match(/\Bate\b/);
[ 'ate', index: 3, input: 'create or ate', groups: undefined ]

 

- 숫자 일치

 

- n번 일치  ( {n} )

const str = "abcaabc"

str.match(/a{1}b/);
// ["ab"]

str.match(/a{2}b/);
// ["aab"]

 

- n번 이상 m번 이하 일치 

 

const str = "aaaaa"

str.match(/a{1,3}b/);
// ["aaa"]

 

적어도 n번 일치

const str = "aaaaa"

str.match(/a{1, }b/);
// ["aaa"]

   

  

  

그룹화

 

특정 부분을 단일 표현식으로 구분 짓기 위해 사용됩니다.

const str ="aaabbabab"

// 이 표현식은 [ab, abb, abbb..] 을 검색합니다.
str.match(/ab+/g);

// 이 표현식은 [ab, abab, abab..] 을 검색합니다.
str.match(/(ab)+/g);

     

    

3. 정규식 메소드 ( Regular Expression Method )

   

1. test

 

test는 특정 문자열 내부에, 정규식과 일치하는 내용이 있는지 유무를 파악 하는데 사용됩니다.

const message2 = "안녕하세요. 010-1234-5687 말고 010-9876-5432으로  연락주세요";

// \d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미합니다.
const regExp = /\d{3}-\d{3,4}-\d{4}/;

// test => true || false
console.log(regExp.test(message));

 

   

2. exec

    

exec 함수는 정규식에 일치하는 내용의 위치와 정보를 출력 합니다.

const message = "안녕하세요. 010-1234-5678 으로 연락주세요.";
const regExp = /\d{3}-\d{3,4}-\d{4}/;

// exec => pattern에 일치한 문자열과 위치
console.log(regExp.exec(message));

// output
[
  '010-1234-5678',
  index: 7,
  input: '안녕하세요. 010-1234-5678 으로 연락주세요.',
  groups: undefined
]

 

   

3. match

 

match는 exec과 같은 정보를 출력합니다. 

다만, 문자열에 메소드를 붙여서 사용한다는 점에서 차이가 있다고 말씀 드릴 수 있습니다.

// pattern에 일치한 문자열과 위치 및 정보 출력
console.log(message.match(regExp));

// output
[
  '010-1234-5678',
  index: 7,
  input: '안녕하세요. 010-1234-5678 으로 연락주세요.',
  groups: undefined
]

 

   

4. replace

 

replace는 정규식에 해당되는 내용을 변경 시키는 역할을 수행합니다.

const message = "안녕하세요. 010-1234-5678 으로 연락주세요.";
const message2 = "안녕하세요. 010-1234-5687 말고 010-9876-5432으로  연락주세요";


// replace는 일치되는 부분을 원하는 내용, 값으로 변경
console.log(message.replace(regExp, "전화번호"));
// 모두 변경 하고 싶다면, /g 을 붙여주자 !
console.log(message2.replace(/\d{3}-\d{3,4}-\d{4}/g, "전화번호"));

// output
안녕하세요. 전화번호 으로 연락주세요.

안녕하세요. 전화번호 말고 전화번호으로  연락주세요

  

   

   

5. 압축 ( Run-length-Encoding )

 

이러한 정규식을 바탕으로, 다음과 같이 압축을 하는 방법도 존재합니다 :D

const raw = "AAAAABBBCCCCDDFFFKKK";
const raw_regExp = /(.)\1*/g;

const result = raw
  .match(raw_regExp)
  .reduce((a, b) => a + `${b.length}${b.slice(0, 1)}`, "");

console.log(result); // 5A3B4C2D3F3K

 

 

 

 

참조

 

https://wormwlrm.github.io/2020/07/19/Regular-Expressions-Tutorial.html

정규표현식 완전정복 - 재그지그의 개발 블로그

 

https://ko.javascript.info/regexp-introduction

패턴과 플래그