Notice
Recent Posts
Recent Comments
Link
관리 메뉴

윤일무이

[JavaScript] 정규표현식 알아보기 본문

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JavaScript] 정규표현식 알아보기

썸머몽 2023. 4. 28. 02:17
728x90

📌 정규표현식

문자열에서 특정 문자 조합을 찾기 위한 패턴

js에서는 정규표현식도 객체로서 RegExp의 exe(), test() 메서드를 사용할 수 있다.

이외 String의 match(), matchAll(), replace(), replaceAll(), search(), split()과도 사용할 수 있다.

간단한 문법은 기존에 포스팅해서 생략했다. 물론 다 까먹어서 다시 봐야하지만 🥺

1) 정규표현식 만들기

  • 슬래시로 패턴 감싸기 (a와 c 사이에 b가 하나 이상 있어야 하는 문자열을 찾아내는 패턴)
const re = /ab+c/
  • RegExp 객체의 생성자 호출
const re = new RegExp('ab+c')

2) 정규표현식 뒤에 붙는 플래그

플래그는 아래와 같이 정규표현식에 지정할 수 있다.

const re = /pattern/flags
const re = new RegExp('pattern', 'flags')

 

플래그들은 d, g, i, m, s, u, y 등 이 있지만 가장 많이 다루는 g, i만 짧게 적어본다.

 

  • g : 전역 검색(global search)으로 문자열에서 정규표현식과 일치하는 모든 패턴을 찾아내고자 할 때 사용한다. 예시와 같이 g가 사용되지 않을 경우에는 문자열에서 첫 번째로 발견된 패턴만 검색한다.
const regex = /foo/g;
console.log(regex.global); // true

const str = "fooexamplefoo";
const str1 = str.replace(regex, "");
console.log(str1); // example

const regex1 = /foo/;
const str2 = str.replace(regex1, '');
console.log(str2);  // examplefoo

g 플래그가 사용된 경우 RegExp.prototype.global 값은 true가 된다. 

str에는 정규표현식과 일치하는 패턴이 맨 앞과 맨 뒤 2번 있다. g 플래그가 사용된 str1은 해당 패턴이 모두 공백으로 대체되었다.

반면 regex1 에서는 g 플래그가 없기 때문에, str2에서는 맨 앞의 패턴만 대체되어 examplefoo가 출력되게 되었다.

 

  • i : 대소문자를 무시하는 검색(ignoreCase)로 대소문자의 구별을 둘 때에는 사용하지 않는다.
const regex1 = new RegExp('foo');
const regex2 = new RegExp('foo', 'i');

console.log(regex1.test('Football'));
// Expected output: false

console.log(regex2.ignoreCase);
// Expected output: true

console.log(regex2.test('Football'));
// Expected output: true

위 예시의 regex1은 foo만, regex2는 foo에 i 플래그가 있다. 대소문자의 구분을 받지 않아 FOO로도 읽혀진다.

3) 함께 사용하는 메서드

1) test() : 주어진 문자열이 정규표현식을 만족하는지 판별하고 그 여부를 true, false로 반환한다.

regexObj.test(str)
const str = 'hello world!';
const result = /^hello/.test(str);

console.log(result); // true

 

g 플래그 설정 시 test()는 정규표현식의 lastIndex를 업데이트 한다.

test(str)을 호출할 때마다 str 검색을 lastIndex에서부터 진행하는데 예시를 보자.

아래 예시처럼 처음 호출했을 때는 lastIndex가 3이었으나 다시 호출하면 그 다음 패턴을 읽어 9로 업데이트 된다.

false를 반환할 땐 lastIndex 속성이 0으로 초기화된다.

const regex = /soo/g;
regex.test('sooabcsoozxy') // true
regex.lastIndex // 3
regex.test('sooabcsoozxy') // true
regex.lastIndex // 9

 

2) macth() : 문자열이 정규식과 매치되는 부분을 검색하며, 일치할 경우 첫 번째 요소를 포함한 배열을 반환하고 일치하지 않을 경우 null을 반환한다.

str.match(regexp)

일단 정리중...

728x90