JavaScript에서 배열에 포함되지 않은 문자만 골라 다른 문자로 바꾸는 방법

문자열을 다루다 보면 허용된 문자만 남기고 나머지는 모두 다른 문자로 가려야 하는 경우가 종종 있습니다. 예를 들어 모음만 남기고 자음은 별표(*)로 치환하거나, 화면에 표시할 수 없는 문자를 숨기는 작업 등이 대표적입니다. 이번 글에서는 이런 요구 사항을 해결하는 replaceChar 함수를 직접 구현해 보겠습니다.

요구 사항 정의

먼저 함수의 형태부터 정리해 보겠습니다.

replaceChar(str, arr, [char])

이 함수는 문자열 str에서 배열 arr에 포함되어 있지 않은 모든 문자를 세 번째 인자 char로 교체합니다. 만약 char가 전달되지 않으면 기본값인 '*'로 대체됩니다.

구현 아이디어

핵심 로직은 매우 단순합니다. 문자열을 split("")으로 한 글자씩 분리한 뒤, 각 문자가 배열에 속하는지 includes()로 판별하고, 속하지 않는 문자만 지정한 문자로 바꾼 후 마지막에 join("")으로 다시 하나의 문자열로 합치는 것입니다. ES6의 기본 매개변수(default parameter) 문법을 활용하면 선택 인자 처리도 깔끔하게 해결할 수 있습니다.

전체 코드

예제

const arr = ['a', 'e', 'i', 'o', 'u'];
const text = 'I looked for Mary and Samantha at the bus station.';
const replaceChar = (str, arr, char = '*') => {
    const replacedString = str.split("").map(word => {
        return arr.includes(word) ? word : char;
    }).join("");
    return replacedString;
};
console.log(replaceChar(text, arr));

출력 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

***oo*e***o***a***a****a*a***a*a****e**u****a*io**

코드 동작 살펴보기

배열 arr에는 소문자 모음(a, e, i, o, u)만 담겨 있으므로, 문자열에서 모음에 해당하는 글자만 원래대로 유지되고 나머지는 모두 *로 바뀝니다. 주목할 점은 문장 맨 앞의 대문자 I도 별표로 치환된다는 것입니다. includes()는 대소문자를 엄격하게 구분하기 때문입니다. 만약 대소문자를 구분하지 않고 비교하고 싶다면, 비교 전에 word.toLowerCase()와 같이 문자를 소문자로 통일한 뒤 검사하면 됩니다.

또한 공백과 마침표 역시 배열에 포함되어 있지 않으므로 함께 치환됩니다. 공백을 유지하고 싶다면 조건에 word === ' ' 같은 예외 처리를 추가하거나, 치환 대상을 정규 표현식으로 필터링하는 방식으로 확장할 수 있습니다.