자바스크립트 정규표현식 간단 활용

단어 포함 확인 시 대소문자 구분 없이 필터링 하도록 구현

 

const keyword = 'Apple';
const keywordRegExp = new RegExp(keyword, 'i');
movies = movies.filter((movie) => keywordRegExp.test(movie.original_title));

위 코드와 같이 특정 단어가 데이터베이스에 포함되어 있는지 확인할 때 정규표현식을 활용할 수 있습니다.
위 예시는 영화 데이터에서 제목 부분을 가져와 keyword가 제목에 포함되어 있는지 확인합니다.
RegExp의 작동 방식은 아래와 같습니다. 

RegExp 객체를 생성하여 찾고자 하는 키워드를 정규표현식으로 등록
'i' 옵션을 통해 검증 시 대소문자를 구분하지 않도록 지정
movie.original_title(프로퍼티 네임)에 대해서 정규표현식을 기준으로 포함 여부를 확인

정규표현식은 일반적으로 정규표현'식'을 써서 유효성 검사 또는 텍스트 전처리에 활용되지만 정규표현식으로 단어 자체를 넣는다면 검사 대상에게 해당하는 단어가 포함되어 있는가를 확인하는 용도로도 사용할 수 있습니다.
추가적으로 'i' 옵션을 통해 대소문자를 가리지 않도록 설정하여서 찾는 키워드와 타겟 모두 대소문자 구분 없이 필터링이 가능합니다.

위 예시 뿐 아니라 일반적으로 정규표현식은 아래와 같이 많이 활용됩니다.

// 이메일 양식 유효성 검사
const re = new RegExp('^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$');

const keyword01 = 'abc@google.com';
const keyword02 = 'abc.google.com';
console.log(re.test(keyword01)); // true
console.log(re.test(keyword02)); // false

폼 제출을 받을 때 이메일 양식은 "문자@문자.문자" 입니다. 즉 글자 사이에 At 기호와 점이 있기를 기대합니다.
정규표현식을 하나하나 해석해보면 아래와 같습니다.

`^`와 `$`는 문자의 시작과 끝을 의미합니다. 해당 양식의 시작과 끝 지점을 표시합니다.
`[ ]` 는 안에 담긴 문자들을 허용합니다.
`[a-z][A-Z]`는 영문 대소문자를 허용합니다.
`[0-9]`는 숫자를 허용합니다.
`[+-_.]` 는 +, -, _, .(플러스, 마이너스, 하이푼, 언더바, 닷) 기호를 허용합니다.
`[ ]+` 대괄호 바깥 오른쪽에 붙은 '+' 기호는 대괄호 안 문자들이 1개 이상 연속으로 나타나는 것을 허용합니다.
대괄호 사이에 있는 `@`, `.`은 해당 기호가 대괄호 사이사이에 포함되어 있는지 여부를 판단합니다.

즉 이메일 주소의 local part에 해당하는 (ID 부분에 해당) 부분은 영문대소문자, 숫자, [+-_.] 기호를 허용합니다.
나머지 부분도 이와 같이 해석할 수 있습니다.

또한 아래와 같이 문자열에 대한 전처리가 필요할 경우에도 적용할 수 있습니다.

// 키워드에서 한글만 추출
const re = new RegExp('[^가-힣]+', 'g');
const keyword = '가a01나b01다';
const result = keyword.replace(re, '');
console.log(result); // '가나다'

위 코드에서 사용한 정규표현식의 의미는 다음과 같습니다.

`[^ ]` 대괄호 안에 hat 기호를 쓸 경우 시작의 의미가 아니라 `반대`를 의미합니다. 즉 "괄호 안의 문자가 아닌" 것을 의미합니다.
옵션으로 'g'를 줄 경우 global을 뜻하며 문자열 전체를 대상으로 해당 정규표현식 조건을 적용함을 의미합니다.

그래서 해석하자면 문자열 전체 영역에서 한글이 아닌 문자열에 대해서 true값을 냅니다.
그래서 replace 메서드로 정규표현식 조건에 true 한 문자는 '빈칸'으로 대체, 즉 삭제함을 뜻합니다.
결론적으로 한글 외 문자는 전부 제외되었습니다.