[js] 정규식 패턴 혼합하는 방법

프론트 단 개발을 하다보니까 input[type="text"] 태그에 입력 제한을 줘야되는 경우가 많았다.

그런데 이게 가끔은 "영어, 한글" 또는 "숫자, 영어" 입력 가능한 상태로 만들어야 되는 경우가 발생했다.

이렇게 혼합된 형태의 문자열 포맷만 입력 가능하도록 하려면 아래와 같이 Regex 를 사용하면 된다.

(() => {
	let engRegexPattern = 'a-zA-Z';
  	let koRegexPattern = 'ㄱ-ㅎㅏ-ㅣ가-힣'; // 모음, 자음도 엄연히 한글이다.
  	let numRegexPattern = '0-9';
    // let spaceOkPattern = '\\s';	// 공백, space 도 받아주려면 이걸 쓰면 된다.
  
	// 한글만 입력 가능하도록 제한
	let onlyKoreanRegexp = new RegExp(`[^${koRegexPattern}]`, 'g');
  
	// 영어만 입력 가능하도록 제한
	let onlyEngRegExp = new RegExp(`[^${engRegexPattern}]`, 'g'); 
  
	// 숫자만 입력 가능하도록 제한
	let onlyNumRegExp = new RegExp(`[^${numRegexPattern}]`, 'g'); 
  
	// 영어, 한글 포맷만 입력 가능하도록 제한하기 위한 Regex 생성
    let englishAndKoreanRegexp 
    	= new RegExp(`[^${engRegexPattern + koRegexPattern}]`, 'g');
  
  	// 영어, 숫자 포맷만 입력 가능하도록 제한하기 위한 Regex 생성
	let englishAndNumberRegexp 
    	= new RegExp(`[^${numRegexPattern + engRegexPattern}]`, 'g');

  	let testCombineString = "hello1234안녕world하세요1234";
  
	console.log('only [한글] : ', testCombineString.replace(onlyKoreanRegexp, ''));
  	
	console.log('only [영어] : ', testCombineString.replace(onlyEngRegExp, ''));
  
	console.log('only [숫자] : ', testCombineString.replace(onlyNumRegExp, ''));
  
	console.log('only [영어+한글] : ', 
                testCombineString.replace(englishAndKoreanRegexp, ''));
  	
	console.log('only [영어+숫자] : ', 
                testCombineString.replace(englishAndNumberRegexp, ''));
 
})();

FireFox 콘솔창에서 실행하면 아래와 같이 출력된다.

TIP : 위와 같은 정규식 기능을 사용해서 html input tag 제한을 걸고 싶다면,
시작하기 앞서 https://circus7.tistory.com/6 링크의 글을 읽어보는 걸 추천한다.