[ 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
정규표현식 완전정복 - 재그지그의 개발 블로그
JavaScript를 활용하여 정규표현식의 기초부터 심화까지의 개념을 짚어봅니다.
wormwlrm.github.io
https://ko.javascript.info/regexp-introduction
패턴과 플래그
ko.javascript.info