정규표현식 (Regular Expression) - 1. 정규식의 활용

SSO·2020년 12월 15일

Javascript & TypeScript

목록 보기

3/4

MDN 정규표현식
정규표현식 생활코딩 강의
정규식 테스트 https://regexr.com/

정규표현식

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴(pattern)(객체).

자바스크립트에서 정규표현식의 활용 => 패턴을 통한 텍스트의 판별

정규표현식의 생성

정규표현식 패턴의 작성

1) 정규표현식 리터럴
var pattern = /a/;
스크립트 호출 시에 컴파일.

2) 정규표현식 객체 생성자
var pattern = new RegExp('a');
정규표현식 실행 시점에 컴파일. 정규식의 패턴이 변경될 가능성이 있거나 다른 출처(ex.사용자 입력)로부터 패턴을 가져와야 하는 경우 사용.

정규표현식의 활용

정규표현식 메소드 실행 -> 매칭된 텍스트의 조작 (원하는 문자열 찾기)
매칭된 문자열 추출
매칭된 문자열 유무 테스트
매칭된 문자열을 다른 문자열로 치환

정규표현식 Method

RegExp.exec() : 패턴 추출
패턴에 매칭되는 문자열이 있는 경우, 해당하는 첫번째 문자열을 배열로 리턴. 없으면 null 리턴.
괄호 캡쳐그룹이 사용된 경우에는, 반환하는 배열은 일치한 텍스트를 첫 번째 원소로, 각각의 괄호 캡처 그룹을 이후 원소로 포함.

var pattern = /a/;
console.log(pattern.exec('abcdef')); // ["a"]

RegExp.test() : 패턴 존재 테스트
패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

var pattern = /a/;
console.log(pattern.test('abcdef')); // true

정규표현식 사용이 가능한 문자열 Method

String.match(regexp): 패턴 추출
g플래그가 없으면 RegExp.exec()와 동일한 결과 반환.
괄호 캡쳐그룹(혹은 캡쳐 괄호)()이 있는 경우, 완전일치하는 문자열 외에 괄호캡쳐그룹과 일치한 결과도 배열에 포함.(g플래그가 없으면 하위문자열-substring-도(그룹에 대응되는 하위문자열) 배열에 반환)
g플래그가 있는 경우에는 대응되는 문자열만 반환함(group을 반환하지 않음).

var pattern = /a/;
var string = 'abcde';
console.log(string.match(pattern)); // ["a"]

var pattern = /[a-c]/g;
var string = 'abcdeabc';
console.log(string.match(pattern)); // ["a","b","c","a","b","c"]

// 괄호캡쳐그룹이 사용된 경우
var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);

console.log(found); //["see Chapter 3.4.5.1", "Chapter 3.4.5.1", ".1"]

참고: match의 결과 배열 해석하기

String.search(regexp): 패턴에 해당하는 문자열 존재 확인
일치하는 부분이 있으면 첫번째로 일치하는 부분의 index 반환, 없으면 -1 반환.

var pattern = /[^\w\s]/g;
var string = 'I am happy.';
console.log(string.search(pattern)); // 10

String.replace(string/regexp, string/function) : 패턴에 해당하는 문자열이 치환된 새로운 문자열 반환

var pattern = /a/;
var string = 'abcde';
console.log(string.replace(pattern, 'A')); // Abcde

++ replace를 replaceAll처럼 사용하기

원래 replaceAll은 타겟 문자열을 새로운 문자열로 바꿔주는데, 타겟 문자열로 정규식을 사용하는 경우에는 해당 정규식에 g플래그가 있을 경우에만 정상적으로 작동. (근데 g플래그가 있으면 굳이 replaceAll안쓰고 replace를 사용해도 되는 것 같다?)

// 정규식이 아닌경우
'aabbcc'.replaceAll('b', '.'); // 'aa..cc'
'aabbcc'.replaceAll(/b/, '.'); // 에러
'aabbcc'.replaceAll(/b/g, '.'); // 'aa..cc'
'aabbcc'.replace(/b/g, '.'); // 'aa..cc' replaceAll과 결과 동일

String.split():

정규표현식의 옵션

플래그를 사용한 고급 검색

i: 대소문자 구별하지 않음

var str = 'Abcde';
var pattern = /a/;
console.log(str.match(pattern)); // null

var patteri= /a/i;
console.log(str.match(patterni)); // ['A']

g: 전역검색

// 검색된 모든 결과를 리턴

var str = 'abcdea';
var pattern = /a/;
console.log(str.match(pattern)); // ['a']

var patteri= /a/g;
console.log(str.match(patterni)); // ['a', 'a']

캡쳐: 패턴을 변수화하여 사용하기

괄호() - 정규표현식의 그룹화

var regex = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(regex, "$2, $1");
// 여기서 $는 괄호 캡쳐된 그룹을 의미.
console.log(newstr); // "Smith, John"

★★ 치환: 함수의 사용 ★★

string.replace(regex, function)

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>'; //교체될 문자열
});
// 주어진 문자열에서 pattern을 찾으면 그 pattern이 function에 전달되도록 약속이 되어있음. 여기서는 url
console.log(result); 

★★ 유용한 예제 ★★
// [replace의 매개변수로서의 함수의 매개변수들](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace#%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EA%B0%80_function%EC%9C%BC%EB%A1%9C_%EC%A7%80%EC%A0%95%EB%90%98%EC%97%88%EC%9D%84_%EB%95%8C)
function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%
// 여기서 p1,p2,p3의 사용이 중요. 괄호로 그룹화 된 패턴을 사용.

참고: 매개변수로 함수가 주어지는 경우의 치환

참고

정규식의 lastIndex: 다음 검색시 검색을 시작할 인덱스. g플래그를 적용한 정규식에 대해서만 설정.

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");
console.log("The value of lastIndex is " + myRe.lastIndex);
// "The value of lastIndex is 5"

정규식 표현
. : match 1 character
+ : match 1 or more of the preceding token (1개 이상)
* : match 0 or more of the preceding token
? : match between 0 and 1 of the preceding token

참고 사이트
정규표현식의 시각화 https://regexper.com/
정규표현식 테스트 https://regexr.com/

SSO

happy

다음 포스트