📍
정규표현식 개념
https://velog.io/@liankim/RegExp
정규 표현식은 특정 패턴과 일치하는 문자열의 '검색'과 '치환'을 상대적으로 간편하게 처리할 수 있는 수단이다.
다음 예제에서 만약 정규 표현식을 사용하지 않는다면, 반복문과 조건문을 통해 ‘첫 번째 문자가 숫자이고 이어지는 문자도 숫자이고 이어지는 문자도 숫자이고 다음은 ‘-‘이고… ’와 같이 한 문자씩 연속해서 체크해야 한다. 정규 표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다.
// 사용자로부터 입력받은 휴대폰 전화번호
const tel = ‘010-1234-567팔
// 정규 표현식 리터럴로 휴대폰 전화번호 패턴 정의
const regExp = /^\d{3}-\d{4}-\d{4}$/;
// tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트
regExp.test(tel); // -> false📌 정규표현식 만들기
정규 표현식은 두 가지 방법으로 만들 수 있다.
정규표현식 리터럴
const re = /ab+c/정규표현식 리터럴은 스크립트를 불러올 때 컴파일되므로, 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다.
RegExp 객체의 생성자 호출
const re = new RegExp('ab+c')생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일된다. 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 사용.
📌 정규 표현식 메서드
정규 표현식을 사용하는 메서드는 RegExp의 exec(), test(), String의 match(), replace(), search(), split() 등이 있다.
RegExp.prototype.exec
exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환하고, 매칭 결과가 없는 경우 null을 반환한다. exec 메서드는 g 플래그(문자열 내의 모든 패턴을 검색)를 지정해도 첫 번째 매칭 결과만 반환한다.
const target = `Is this all there is?`;
const regExp = /is/;
regExp.exec(target);
// -> [ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]RegExp.prototype.test
test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
const target = `Is this all there is?`;
const regExp = /is/;
regExp.exec(target);
// -> trueString.prototype.match
match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다. exec 메서드는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환하지만, match 메서드는 g 플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.
const target = `Is this all there is?`;
const regExp = /is/;
const regExp2 = /is/g;
target.match(regExp);
// -> [ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]
target.match(regExp2);
// -> [ 'is', 'is' ]String.prototype.replace
replace 메서드의 첫 번째 인자에 정규식을 전달하면 해당 패턴과 매칭하는 문자열을 두 번째 인자의 값으로 치환한다. replace 메서드는 첫 번째로 발견한 문자열만 치환하기 때문에, g 플래그를 지정하면 모든 매칭 문자열을 치환할 수 있다.
const target = `Is this all there is?`;
const regExp = /is/;
const regExp2 = /is/gi;
target.replace(regExp, 'at')
// -> Is that all there is?
target.replace(regExp2, 'at')
// -> at that all there at?String.prototype.search
search 메서드는 해당 패턴이 시작하는 인덱스를 반환한다. g 플래그를 지정해도 첫 번째 매칭 결과만 반환한다.
const target = `Is this all there is?`;
const regExp = /is/;
target.search(regExp);
// -> 5String.prototype.split
split 메서드에 정규식을 인자로 전달하면 해당 패턴을 구분자로 잘라서 배열로 반환한다.
const target = `Is this all there is?`;
const regExp = /is/;
const regExp2 = /is/i;
target.split(regExp);
// [ 'Is th', ' all there ', '?' ]
target.split(regExp2);
// [ '', ' th', ' all there ', '?' ]📌 자주 사용하는 정규 표현식
특정 단어로 시작하는지 검사
'http://' 또는 'https://'로 시작하는지 검사
[ … ] 바깥의 ^은 문자열의 시작을 의미하고, ?은 앞선 패턴('s')이 있거나 없거나 매치된다.
const url = `https://example.com`;
/^https?:\/\//.test(url); // -> true특정 단어로 끝나는지 검사
‘html’로 끝나는지 검사
’$’는 문자열의 마지막을 의미한다.
const fileNmae = `index.html`;
/html$/.test(fileNmae); // -> true숫자로만 이루어진 문자열인지 검사
[ … ] 바깥의 ^은 문자열의 시작을, $은 문자열의 마지막을 의미한다. \d는 숫자를 의미하고, +는 앞선 패턴이 최소 한 번 이상 반복되는 문자열을 의미한다. 즉, 처음과 끝이 숫자이고 최소 한 번 이상 반복되는 문자열과 매치한다.
const target = `12345`;
/^\d+$/.test(target); // -> true하나 이상의 공백으로 시작하는지 검사
\s는 스페이스, 탭 등의 여러 가지 공백 문자를 의미한다. 즉 \s는 [\t\r\n\v\f]와 같은 의미.
const target = 'Hi';
/^[\s]+/.test(target); // -: true아이디로 사용 가능한지 검사
알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사
{4,10}은 앞선 패턴이 최소 4번, 최대 10번 반복되는 문자열을 의미한다. 즉, 4~10자리로 이루어진 알파벳 대소문자 또는 숫자를 의미.
const id = 'abc123’;
/$[A-Za-z0-9]{4,10}$/.test(id); // -> true메일 주소 형식에 맞는지 검사
const email = `abcdefg@abcde.com`;
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email); // -> true핸드폰 형식에 맞는지 검사
const cellphone = '010-0000-0000'
/^\d{3}-\d{3,4}-d{4}$/.test(cellphone); // -> true특수문자 포함 여부 검사
const target = `abc#123`;
(/[^A-Za-z0-9]/gi).test(target); // -> true
// 다음 방식을 사용하면 선택적으로 검사 가능
(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi).test(target); // -> true// 특수문자를 제거할 때는 String.prototype.replace 메서드 사용
target.replace(/[^A-Za-z0-9]/gi, ''); // -> abc123참고 자료
MDN Regular expressions
이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스
