정규 표현식(Regular Expression)이란?
정규 표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다.
미리보는 예시!
// 예를 들어 010-1234-5678 이라는 전호번호는 "숫자3개", "-", "숫자4개", "-", "숫자4개" 로 이루어져 있다.
const regex = /\d{3}-\d{4}-\d{4}/;
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.)
regex.test('010-1234-5678') // true;
regex.test('01-12-23') // false;그러나 정규표현식은 주석이나 공백을 허용하지 않고, 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 단점이 있다.
정규식의 생성 방법은 2가지가 존재한다.
1) 정규식 리터럴
let regex = /ab+c/;- "/" 슬래쉬로 감싸는 패턴이다.
- 스크립트가 불러와질 때 컴파일된다. (컴파일이란? 컴퓨터가 이해할 수 있는 언어로 바꾸어주는 과정)
- 정규식이 상수라면, 위 방식이 성능을 향상시킬 수 있다.
2) RegExp 객체의 생성자 함수 호출
let regex = new RegExp("ab+c");- 정규식 실행 시점에 컴파일이 된다.
- 정규식 패턴이 변경될 수 있는 경우 또는 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 위 방식을 사용한다.
정규식 패턴 작성하기
단순 패턴
/sanghun/위의 단순 패턴은 표현된 문자열을 그대로 대응시키고자 할 때 사용된다.
문자열에서 정확하게 'sanghun' 순서까지 모두 일치한다면 대응이 된다.
"sangabchun" = "sanghun" 사이에 abc가 들어가있지만 sanghun의 순서가 일치하므로 대응이 됨
"sangabchnu" = 똑같이 abc가 들어가있지만 "sanghun"에서 u와 n 순서의 불일치로 대응이 안됨
특수 문자 패턴
있는 그대로의 패턴 대응이 아닌 공백을 찾거나, 하나 이상의 'a'를 찾거나 등등 조금 더 복잡한 대응을 필요로 할 경우 특수 문자 패턴이 필요하다.
/sanghu*n/ -> * 별표 곱하기가 아니라 shift + 숫자8 특수문자에요ㅎㅎ의 뜻은 바로 앞의 문자가 0개 이상이라는 것을 의미한다.
즉, 위의 패턴은 각각 s, a, n, g, h, u문자 + n문자 순으로 나오는 것과 대응한다.
메소드
여러가지 메소드가 있지만 대표적인 3가지는 test, match, replace가 있다.
메소드 사용 방법
let str = `
010-1234-5678
sanghun0404@naver.com
Hello world!
`
// 모두 리터럴 방식 사용
// regexp는 정규식, str은 문자열
//.test()
const regexp = /sanghun/gi
console.log(regexp.text(str)) // 결과 : true
// .replace()
const regexp = /sanghun/gi
console.log(str.replace(regexp, 'AAA')) // 결과 : "sanghun"이라는 단어가 "AAA"로 대체된다.
// .match()
const regexp = /sanghun/gi
console.log(str.match(regexp)) // 결과 : "sanghun"이라는 단어가 배열 데이터로 콘솔에 출력이 된다. [sanghun]위의 메소드 예시 코드를 보면, 리터럴 방식으로 표현하고 그 뒤에 옵션으로 처음보는 영단어 표현이 있어서 해석하기 어려울 수 있다.
플래그
이를 해석하기 위해서는 플래그를 알고 있다면 쉽게 이해할 수 있으며, 대표적인 3가지로 g, i, m이 있다.
- g : 모든 문자를 검색한다. (global의 약자)
- i : 영어 대소문자를 구분하지 않게 한다. (ignore case의 약자)
- m : 여러 줄에 시작과 끝 부분을 있게 해준다. (nulti line의 약자)
추가로, 문자열을 정의할때 `와 같은 백틱 기호를 사용하면 줄바꿈을 하더라도 한줄로 인식을 하게된다.
따라서 위의 예시 코드에서 백틱 기호로 문자열을 정의하고, m을 사용하게 된다면
010-1234-5678
sanghun0404@naver.com
Hello world!
각각 한 줄당 시작과 끝이 존재하도록 해준다.
