JavaScript에서 문자열에서 특정 하위 문자열 제거하는 방법

문자열에서 특정 하위 문자열 제거하기

메인 문자열과 제거할 하위 문자열(substring)이 주어졌을 때, 두 개의 인수를 받아 해당 하위 문자열이 제거된 새로운 문자열을 반환하는 함수 removeString()을 만들어 보겠습니다.

예를 들어, 다음과 같은 문자열에서 하이픈(-) 구분자를 제거해야 하는 상황을 가정해 봅시다.

this-is-a-sting

split()과 join()을 활용한 방법

가장 간단하고 널리 사용되는 방식은 split() 메서드로 문자열을 구분자를 기준으로 분리한 뒤, join() 메서드로 다시 하나의 문자열로 합치는 것입니다.

const removeString = (string, separator) => {
    // split()으로 문자열을 구분자 기준으로 나눕니다
    const separatedArray = string.split(separator);
    // 분리된 배열을 빈 문자열로 다시 연결합니다
    const separatedString = separatedArray.join("");
    return separatedString;
}
const str = removeString('this-is-a-sting', '-');
console.log(str);

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

thisisastring

동작 원리

split('-')은 문자열을 하이픈을 기준으로 잘라내어 ['this', 'is', 'a', 'sting']이라는 배열을 생성합니다. 이후 join("")이 배열의 요소들을 구분자 없이 하나의 문자열로 이어 붙여 최종적으로 하이픈이 모두 제거된 문자열을 만들어냅니다.

대체 방법: replaceAll() 활용

ES2021부터 지원되는 replaceAll() 메서드를 사용하면 훨씬 더 간결하게 동일한 결과를 얻을 수 있습니다.

const str = 'this-is-a-sting'.replaceAll('-', '');
console.log(str); // thisisastring

두 방법 모두 문자열 내의 모든 구분자를 제거한다는 점에서 동일하지만, replaceAll()은 의도가 더 명확하게 드러난다는 장점이 있습니다. 프로젝트의 JavaScript 환경이 ES2021 이상을 지원한다면 replaceAll() 사용을 권장합니다.