JavaScript로 문자열에서 구두점·특수문자 깔끔하게 제거하는 방법

문제 개요

문자열을 입력받아 구두점 등 특수 문자와 공백을 모두 제거한 뒤, 알파벳과 숫자만 남긴 새로운 문자열을 반환하는 JavaScript 함수를 작성해 보겠습니다.

입력 예시

const str = 'th@is Str!ing Contains 3% punctuations';

출력 예시

const output = 'thisStringContains3punctuations';

@, !, % 와 같은 특수 기호와 공백이 모두 제거되어 알파벳과 숫자만 남게 됩니다.

방법 1: 반복문으로 한 글자씩 검사하기

가장 직관적인 접근 방식은 문자열을 처음부터 끝까지 순회하면서, 각 문자가 유효한 문자(알파벳 또는 숫자)인지 판별하는 것입니다.

const str = 'th@is Str!ing Contains 3% punctuations';

const removeSpecialChars = (str = '') => {
   let res = '';
   for (let i = 0; i < str.length; i++) {
      const el = str[i];
      if (+el) {
         // 숫자인 경우 그대로 추가
         res += el;
      } else if (el.toLowerCase() !== el.toUpperCase()) {
         // 대소문자 변환 값이 다르면 알파벳이므로 추가
         res += el;
      }
   }
   return res;
};

console.log(removeSpecialChars(str));

실행 결과

thisStringContains3punctuations

동작 원리

• +el: 단항 더하기 연산자로 문자를 숫자로 변환합니다. 숫자 문자라면 참이 되어 결과에 포함됩니다.
• el.toLowerCase() !== el.toUpperCase(): 알파벳은 대소문자를 변환하면 값이 달라지지만, 특수 문자나 공백은 변환 후에도 동일합니다. 이 성질을 이용해 알파벳 여부를 판별합니다.
• 두 조건에 모두 해당하지 않는 문자(구두점, 공백 등)는 자연스럽게 걸러집니다.

방법 2: 정규표현식 활용하기

더 간결하고 실무에서 널리 쓰이는 방법은 replace() 메서드와 정규표현식을 조합하는 것입니다.

const removeSpecialChars = (str = '') => {
   return str.replace(/[^a-zA-Z0-9]/g, '');
};

console.log(removeSpecialChars('th@is Str!ing Contains 3% punctuations'));
// 출력: thisStringContains3punctuations

정규표현식 /[^a-zA-Z0-9]/g는 알파벳과 숫자를 제외한(^ 부정 문자 클래스) 모든 문자를 찾아 빈 문자열로 교체합니다. 한 줄로 처리할 수 있어 가독성과 유지보수 측면에서 유리합니다.

마무리

반복문 방식은 내부 로직을 이해하기 좋고 학습 목적에 적합하며, 정규표현식 방식은 코드가 짧고 실행 성능도 뛰어납니다. 특별한 요구 사항이 없다면 실무에서는 정규표현식을 사용하는 것을 권장합니다.