웹 개발에서 문자열을 다루는 작업은 핵심적인 부분이며, 특히 특정 문자열을 다른 문자열로 교체하는 작업은 빈번하게 발생합니다. 자바스크립트(JavaScript, JS)에서 문자열 교체는 주로 replace() 함수를 사용하지만, 모든 일치 항목을 교체하려면 정규표현식(RegExp)을 사용하거나 비교적 최신 함수인 replaceAll()을 사용해야 합니다.
📚 함께 읽으면 좋은 글
이 가이드는 JS에서 문자열을 효과적으로 교체하는 세 가지 주요 방법과, 각 방법의 특징 및 브라우저 호환성에 대해 2025년 최신 정보를 반영하여 자세히 설명합니다. 웹 개발 효율성을 높이는 데 필요한 핵심 지식을 얻을 수 있습니다.
자바스크립트 문자열 치환 기본 replace() 함수 활용 확인하기
JS의 String.prototype.replace() 함수는 문자열 교체를 위한 가장 기본적인 방법입니다. 이 함수는 첫 번째 인수로 교체할 패턴(문자열 또는 정규표현식)을 받고, 두 번째 인수로 새로운 문자열(또는 교체 값을 반환하는 함수)을 받습니다. 가장 중요한 특징은 문자열을 인수로 사용할 경우, 문자열 내에서 첫 번째로 일치하는 항목만 교체한다는 점입니다.
예를 들어, “Hello world, hello JS”라는 문자열에서 “hello”를 “Goodbye”로 바꾸려고 하면, 첫 번째 “hello”만 변경됩니다.
const originalString = "Hello world, hello JS."; const newString = originalString.replace("hello", "Goodbye"); // 대소문자 구분 // 결과: "Hello world, hello JS." (첫 번째 'hello'를 찾지 못함)
const newStringCaseInsensitive = originalString.replace("Hello", "Goodbye"); // 결과: "Goodbye world, hello JS."모든 일치 항목을 교체하려면 다음 섹션에서 설명할 정규표현식을 사용해야 합니다. replace() 함수는 원본 문자열을 변경하지 않고, 새로운 문자열을 반환합니다.
정규표현식을 이용한 JS 문자열 모두 교체 방법 상세 더보기
문자열에서 모든 일치하는 패턴을 교체하는 가장 오래되고 범용적인 방법은 replace() 함수와 정규표현식(Regular Expression)의 전역 플래그(g, global)를 조합하여 사용하는 것입니다. 정규표현식은 문자열 패턴을 정의하는 강력한 도구입니다.
정규표현식 리터럴은 슬래시(/) 사이에 패턴을 넣고, 그 뒤에 플래그를 붙여서 만듭니다. /패턴/g는 문자열 전체에서 일치하는 모든 패턴을 찾으라는 의미입니다.
const sentence = "apple, orange, apple, grape"; // 'apple'을 'banana'로 모두 교체 (대소문자 구분) const newSentence = sentence.replace(/apple/g, "banana"); // 결과: "banana, orange, banana, grape"만약 대소문자를 구분하지 않고 모두 교체하고 싶다면, 전역 플래그(g)와 함께 대소문자 무시 플래그(i, insensitive)를 사용하여 /패턴/gi 형태로 사용합니다. 이 방법은 replaceAll() 함수가 도입되기 이전부터 사용되어 왔기 때문에, 구형 브라우저를 포함한 모든 환경에서 가장 높은 호환성을 보장합니다.
최신 JS replaceAll() 함수 사용법 및 브라우저 지원 확인하기
2021년에 ECMAScript 2021 표준에 도입된 String.prototype.replaceAll() 함수는 문자열 인수로도 정규표현식의 g 플래그와 동일하게 모든 일치 항목을 한 번에 교체해주는 편리한 기능을 제공합니다. 이 함수는 개발자들이 replace()와 /g 정규표현식을 사용하는 번거로움을 줄여주기 위해 도입되었습니다.
const text = "2025년도 웹 개발, 2025년도 트렌드"; const newText = text.replaceAll("2025년도", "2026년도"); // 결과: "2026년도 웹 개발, 2026년도 트렌드"replaceAll()은 첫 번째 인수로 문자열 외에 정규표현식도 받을 수 있으나, 정규표현식을 사용하는 경우 반드시 전역 플래그(g)를 포함해야 합니다. 그렇지 않으면 TypeError가 발생합니다. 이 규칙은 오로지 첫 번째 일치 항목만 교체하는 replace()와의 혼동을 막기 위함입니다.
2025년 replaceAll 브라우저 호환성
2025년 현재 시점(12월)을 기준으로 replaceAll() 함수는 대부분의 최신 브라우저(Chrome, Firefox, Edge, Safari 등)에서 완벽하게 지원됩니다. 2024년까지만 해도 일부 레거시 환경을 고려해야 했지만, 이제는 안정적으로 사용할 수 있는 함수로 자리 잡았습니다. 따라서 신규 프로젝트에서는 정규표현식 없이도 모든 문자열 교체가 가능합니다.
하지만, 극히 일부의 구형 환경(예: 오래된 NodeJS 버전 또는 특정 임베디드 브라우저)을 지원해야 한다면, 여전히 정규표현식을 사용한 replace(/pattern/g, replacement) 방식이 더 안전한 선택이 될 수 있습니다. 현시점에서는 replaceAll()을 주력으로 사용하고, 필요 시 폴리필(Polyfill)을 고려하거나 정규표현식으로 대체하는 것이 효율적입니다.
JS 문자열 교체 시 대체 함수 사용 및 유의사항 보기
replace()와 replaceAll() 외에도 문자열을 교체하는 간접적인 방법들이 있습니다. 특히 배열 메서드를 활용하는 방식은 복잡한 교체 로직이 필요할 때 유용할 수 있습니다.
split()과 join() 메서드 조합
이 방법은 교체할 문자열을 기준으로 원본 문자열을 배열로 분리(split())한 다음, 배열 요소들을 새로운 문자열로 다시 연결(join())하면서 교체 문자열을 삽입하는 방식입니다. 이 방법은 replaceAll() 함수가 존재하지 않던 시절, 정규표현식 사용이 부담스러울 때 모든 항목을 교체하는 대안으로 사용되었습니다.
const data = "A-B-C-D"; const newData = data.split("-").join(" "); // 결과: "A B C D"이 방식은 replaceAll()에 비해 성능적으로 약간의 오버헤드가 있을 수 있으나, 매우 직관적이라는 장점이 있습니다.
정규표현식의 $1, $2 등 캡처 그룹 활용
정규표현식에서는 캡처 그룹(괄호로 묶인 패턴)을 사용하여 교체 값(두 번째 인자)에서 해당 그룹에 일치하는 텍스트를 참조할 수 있습니다. $1, $2 등은 각각 첫 번째, 두 번째 캡처 그룹에 해당합니다. 이 기능은 문자열의 순서를 바꾸거나, 일치하는 텍스트 주변에 새로운 텍스트를 삽입할 때 매우 강력하게 활용됩니다.
const dateString = "2025-12-14"; // YYYY-MM-DD 형식을 DD/MM/YYYY로 변경 const formattedDate = dateString.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1"); // 결과: "14/12/2025"이러한 고급 정규표현식 기법을 숙달하면 복잡한 문자열 처리 로직을 훨씬 간단하게 구현할 수 있습니다.
자바스크립트 문자열 교체 함수별 특징 비교 테이블 확인하기
JS 문자열 교체 함수들의 핵심 특징을 한눈에 비교할 수 있도록 정리했습니다. 프로젝트 요구 사항과 브라우저 호환성을 고려하여 가장 적합한 함수를 선택하세요.
| 함수 | 문자열 인수 시 교체 범위 | 정규표현식 지원 | 2025년 호환성 |
|---|---|---|---|
replace() |
첫 번째 일치 항목만 교체 | 지원 (g 플래그 사용 시 전체 교체 가능) |
매우 높음 (레거시 환경 포함) |
replaceAll() |
모든 일치 항목을 교체 | 지원 (g 플래그 필수) |
높음 (대부분의 최신 브라우저 지원) |
split().join() |
모든 일치 항목을 교체 | 정규표현식 지원 불가 (split()은 가능) |
매우 높음 |
📌 추가로 참고할 만한 글
자주 묻는 질문 (FAQ)
H3 JS replace와 replaceAll의 가장 큰 차이점은 무엇인가요 확인하기
가장 큰 차이점은 교체 범위입니다. replace()는 첫 번째 일치 항목만 교체하지만, replaceAll()은 문자열 인수로도 모든 일치 항목을 교체합니다. replace()로 전체 교체를 하려면 반드시 정규표현식의 g(전역) 플래그를 사용해야 합니다.
H3 replaceAll을 구형 브라우저에서 사용하려면 어떻게 해야 하나요 보기
replaceAll() 함수는 비교적 최신 표준이므로 구형 브라우저에서는 지원하지 않습니다. 이러한 환경을 지원하려면, String.prototype.replaceAll이 없는 경우 replace(/pattern/g, replacement)와 같은 형태로 대체 동작하도록 하는 폴리필(Polyfill)을 사용하거나, 애초에 정규표현식을 이용한 replace() 방식을 주력으로 사용해야 합니다.
H3 정규표현식 없이 모든 문자열을 교체하는 가장 쉬운 방법은 무엇인가요 상세 더보기
현재 시점(2025년) 기준으로 가장 쉽고 권장되는 방법은 replaceAll() 함수를 사용하는 것입니다. 문자열을 인수로 넣어주기만 하면 별도의 복잡한 정규표현식 문법 없이도 모든 일치 항목이 교체됩니다. 예를 들어, "문자열".replaceAll("찾을값", "바꿀값")처럼 간단합니다.
H3 replace() 함수의 두 번째 인수로 함수를 넣을 수 있나요 확인하기
예, replace() 함수의 두 번째 인수는 교체 문자열 외에 함수를 사용할 수 있습니다. 이 함수는 일치 항목이 발견될 때마다 실행되며, 반환하는 문자열이 교체 값으로 사용됩니다. 이는 일치하는 값에 따라 동적으로 교체 문자열을 생성해야 할 때 매우 유용합니다.
H3 replaceAll에 정규표현식을 사용할 때 왜 g 플래그가 필수인가요 보기
replaceAll()에 정규표현식을 사용할 때 g 플래그가 필수인 이유는, replace() 함수와 명확히 구분하고 개발자의 실수를 방지하기 위함입니다. 만약 g 플래그 없이 replaceAll()을 사용하면 개발자가 의도한 모든 교체가 아닌 첫 번째 교체만 일어날 수 있어 혼동을 줄 수 있습니다. 따라서 ECMAScript 표준에서는 g 플래그를 강제하여 항상 ‘모든’ 교체가 일어나도록 했습니다.