JS - 정규식(Regular Expression)

코딩에서 사용하기에 유용한 정규식을 정리하여 필요할 때 찾아보고 사용하면서 익혀보자.
(📝 Updating)

정규표현식 패턴 학습 추천 사이트 regex101

정규식(정규 표현식) 이란.

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.

JavaScript에서의 정규 표현식에는
객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다.
String으로서, match(), matchAll() (en-US), replace(), replaceAll() (en-US), search(), split() 메서드와도 함께 사용할 수 있습니다. <참조>

- 문자열에서 숫자만 뽑기

str = str.replace(/[^0-9]/g, ""); 
// 0-9를 제외한 전체에 "" 적용 -> 숫자만 뽑기

- 문자열에서 a-z만 뽑기

s = s.toLowerCase().replace(/[^a-z]/g, ""); 
// a-z를 제외한 전체에 "" 적용 -> a-z만 뽑

- input tag에 숫자만 입력하게 하는 방법

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
//

- 숫자 3자리마다 콤마찍고 문자열만들기

const number = 12345.6789;
const numberToStr = number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
// 12,345.6789

+) replace() 추가학습

replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다.
그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며,
교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. <참조>

const numberStr = "123,456,789";
const number = numberStr.replace(",", "");
// 123456,789

위에서 replace() 함수는 2개의 파라미터를 입력받고,
문자열에서 첫번째 파라미터(여기서는 ",")를 두번째 파라미터(여기서는 "")로 치환해 준다.
하지만, 모든 콤마가 제거 되지는 않았다.
replace() 함수는 첫번째로 발견한 값만 치환해 주기 때문이다.
그래서, 문자열 전체에서 모든값(첫번째 파라미터와 일치하는)을 치환해 주기 위해서는
반복문을 사용하거나 정규식을 사용해야 한다.

- 숫자 콤마 제거하는 방법

const numberStr = "123,456,789";
const number = numberStr.replace(/,/g, "");
// 123456789
// (/,/ 콤마를 찾고 g 전체에서 , "" 적용)

- 마지막 4자리 빼로 "*"로 바꾸기

return s.replace(/\d(?=\d{4})/g, "*");

- 첫 문자만 대문자로 바꾸기

let str = "hello world";
let newStr = str.replace(/^[a-z]/, char => char.toUpperCase());
// Hello world


let str = "hello world javascript";
let newStr = str.replace(/\b[a-z]/g, char => char.toUpperCase());
// Hello World Javascript

- 특정 단어로 시작하는지 검사

const url = "https://example.com";

// 'http://' 또는 'https://'로 시작하는지 검사한다.
/^https?:\/\//.test(url); // -> true

- 특정 단어로 끝나는지 검사

const fileName = "index.html";

// 'html'로 끝나는지 검사한다.
/html$/.test(fileName); // -> true

- 숫자로만 이루어진 문자열인지 검사

const target = "12345";

// 숫자로만 이루어진 문자열인지 검사한다.
/^\d+$/.test(target); // -> true

- 하나 이상의 공백으로 시작하는지 검사

const target = " Hi!";

// 하나 이상의 공백으로 시작하는지 검사한다.
/^[\s]+/.test(target); // -> true

- 아이디로 사용 가능한지 검사

const id = "abc123";

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~ 10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}$/.test(id); // -> true

- 메일 주소 형식에 맞는지 검사

const email = "ungmo2@gmail.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

• REC 5322 (인터넷 메시지 형식) 규약에 맞는 정교한 패턴 매칭의 경우

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

- 핸드폰 번호 형식에 맞는지 검사

const cellphone = "010-1234-5678";

/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // -> true

- 특수문자 포함 여부 검사

• 특수 문자는 A-Za-z0-9 이외의 문자다.

const target = "abc#123";

// A-Za-z0-9 이외의 문자가 있는지 검사한다.
/[^A-Za-z0-9]/gi.test(target); // -> true

• 아래는 특수 문자를 선택적으로 검사 할 수 있다.

/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi.test(target); // -> true

• 특수 문자를 제거할 때는 String.prototype.replace 메서드를 사용한다.

target.replace(/[^A-Za-z0-9]/gi, ""); // -> abc123