동적으로 정규표현식 사용하기

 

input에서 소수점 자리 수를 맞춰주기 위해 정규표현식을 활용했다.

이때, 입력으로 넣은 소수점 자리 수에 따라 정규표현식을 바꾸고 싶어서 동적으로 정규표현식을 사용하는 방법을 찾아봤다.

 

 

일반적으로 정규표현식을 생성하는 방법은 두가지이다. 

 

1. 정규 표현식 리터럴

const regexp = /is/i;

 

2. RegExp 생성자 함수

// new RegExp(pattern[, flag])
const regexp = new RegExp(/is/i);   // ES6

 

 

동적으로 변수를 넣어주기 위해서는 "백틱으로 감싸준다" 라는 방법이 생각날 것이다.

그러나 정규 표현식 리터럴에서는 단순히 백틱으로 감싸서 사용하면 문자열로 취급되기 때문에 정규표현식으로 사용이 불가능하다. 

// ❌
const regExp = `^[0-9]+\\.?\\d{0,${decimal}}`;

 

 

그렇다면 방법은 new RegExp 문을 통해 백틱 내의 문자열을 정규표현식 객체로 만들어주는 것이다.

이때 / 로 양쪽을 감싸주면 '문자 /'를 포함한 정규표현식으로 인식하기 때문에, 양 끝의 /를 제외한 문자열을 사용해야 한다. 

// ⭕
const regExp = new RegExp(`^[0-9]+\\.?\\d{0,${decimal}}`);