JavaScript Katana

JavaScript 문자열 replace() 메서드 설명: 기본, 정규식, 실용 예제

데이터 처리(문자열·숫자·날짜·배열·객체)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. 소개

JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 특히 문자열 조작은 사용자 입력 및 데이터 처리 시 자주 사용되는 기능입니다. 이러한 기능 중 replace() 메서드는 문자열 교체 작업을 손쉽게 수행할 수 있는 강력한 도구로 알려져 있습니다.

이 글에서는 JavaScript replace() 메서드를 기본부터 고급 사용법까지 자세히 설명합니다. 기본 예제는 물론 정규 표현식을 활용한 고급 교체와 실무에서 활용할 수 있는 실제 사례까지 다룹니다. 초보자부터 중급 개발자까지 모두에게 유용하도록 구성되었습니다.

2. replace() 메서드의 기본

replace() 메서드란?

replace() 메서드는 문자열의 특정 부분을 다른 문자열로 교체하는 데 사용되는 내장 JavaScript 함수입니다. 이 메서드를 활용하면 문자열 데이터를 효율적으로 편집하고 변형할 수 있습니다.

구문

string.replace(pattern, replacement)
  • pattern : 검색할 문자열 또는 정규 표현식입니다.
  • replacement : 교체할 문자열 또는 콜백 함수입니다.

기본 사용법

다음 예제는 간단한 문자열 교체를 보여줍니다.

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

이 코드에서는 문자열 “world”가 “JavaScript”로 교체됩니다.

중요한 참고 사항

  1. replace()는 첫 번째 매치된 항목만 교체합니다.
  2. 모든 매치된 항목을 교체하려면 g 플래그가 포함된 정규 표현식을 사용해야 합니다.

3. 정규 표현식을 활용한 고급 교체

정규 표현식이란?

정규 표현식은 문자열 패턴을 기술하는 강력한 도구입니다. JavaScript에서 정규 표현식을 사용하면 복잡한 패턴 매칭 및 교체 작업을 손쉽게 수행할 수 있습니다.

정규 표현식을 이용한 교체 예시

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

플래그 종류

  • g : 전역 교체 (모든 매치를 교체)
  • i : 대소문자 구분 없이 교체
  • m : 멀티라인 모드

고급 예시: 대소문자 구분 없이 교체

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. 여러 매치 교체

모든 매치 교체

문자열에서 일치하는 모든 항목을 교체하려면 정규 표현식에 g 플래그를 사용합니다.

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

여러 다른 문자열을 한 번에 교체하는 기법

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

이 방법을 사용하면 여러 패턴을 동시에 교체하면서 코드 가독성을 높일 수 있습니다.

5. 콜백 함수를 이용한 동적 교체

콜백 함수란?

콜백 함수는 교체 과정 중에 호출되며 현재 매치 정보를 활용해 작업을 맞춤화할 수 있게 해줍니다.

동적 교체 예시

1. 문자열 순서 재배열

let text = "Tanaka, Taro";
let result = text.replace(/(\w+), (\w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. 날짜 형식 변환

let date = "2024-12-25";
let formattedDate = date.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. 특수 문자 및 이스케이프 시퀀스 처리

특수 문자란 무엇인가요?

정규 표현식에서 특정 문자들은 메타문자로서 특별한 의미를 가집니다. 검색이나 교체 작업에서 이러한 문자를 문자 그대로 사용하려면 이스케이프 시퀀스를 사용해야 합니다.

특수 문자를 포함하는 문자열 교체

예제 1: 마침표를 포함하는 문자열 교체

let text = "www.example.com";
let result = text.replace(/\./g, "-");
console.log(result); // "www-example-com"

예제 2: 달러 기호 제거

let price = "$1,000";
let result = price.replace(/\$/g, "");
console.log(result); // "1,000"

HTML 이스케이프 문자 교체

예제: HTML 태그 이스케이프

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. 실용적인 사용 사례 및 고급 기술

줄 바꿈을
태그로 변환

let text = "Hello\nWorld\nJavaScript";
let result = text.replace(/\n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

URL 매개변수 조작

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

사용자 입력 정화

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. 중요 참고 사항 및 모범 사례

첫 번째 일치만 교체된다는 점을 유의하세요

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

대소문자 구분에 주의하세요

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

특수 문자를 이스케이프하는 것을 잊지 마세요

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. 결론

기사 요약

  • 기본 사용법: replace() 메서드의 구문과 간단한 예제를 설명했습니다.
  • 정규 표현식 활용: 고급 교체 작업을 위한 정규 표현식 및 플래그 사용 방법을 다루었습니다.
  • 콜백 함수: 실용적인 예시와 함께 동적 교체 기법을 시연했습니다.
  • 실용 예제: URL 조작 및 입력 정화와 같은 유용한 기술을 소개했습니다.
  • 모범 사례: 중요한 주의사항 및 성능 관련 고려사항을 설명했습니다.

마무리 생각

JavaScript replace() 메서드는 기본부터 고급 시나리오까지 효과적으로 사용할 수 있는 다재다능하고 강력한 도구입니다. 앞으로도 유용한 JavaScript 관련 콘텐츠를 지속적으로 제공할 예정이니 기대해 주세요.

広告