JScript Katana

JavaScript replace() 마스터하기: 정규식, 콜백 및 베스트 프랙티스를 포함한 완전 가이드

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

1. Introduction

JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 특히 문자열 조작은 사용자 입력을 처리하거나 데이터를 가공할 때 흔히 수행되는 작업입니다. 이 중 replace() 메서드는 문자열 교체를 간단하고 효율적으로 만들어 주는 강력한 도구로 알려져 있습니다.
이 글에서는 JavaScript replace() 메서드를 기본부터 고급 기술까지 자세히 설명합니다. 기본 사용법은 물론 정규식을 활용한 고급 교체와 실용적인 예제를 다루어 초보자와 중급 개발자 모두에게 도움이 되도록 하겠습니다.

2. Basics of the replace() Method

What is the replace() Method?

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

Syntax

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

Basic Usage

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

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

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

Notes

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

3. Advanced Replacement with Regular Expressions

What is a Regular Expression?

정규식은 문자열 패턴을 표현하는 강력한 도구입니다. JavaScript에서는 정규식을 사용해 복잡한 검색 및 교체를 손쉽게 수행할 수 있습니다.

Example: Replacement with Regular Expressions

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

Types of Flags

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

Example: Case-Insensitive Replacement

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

4. Replacing Multiple Occurrences

Replacing All Matches

정규식에 g 플래그를 사용하면 모든 일치 항목을 교체할 수 있습니다.

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

Technique: Replace Multiple Different Strings at Once

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. Dynamic Replacement with Callback Functions

What is a Callback Function?

콜백 함수는 교체 과정 중에 호출되며, 매치 정보를 활용해 결과를 맞춤화할 수 있습니다.

Examples of Dynamic Replacement

1. Swapping String Order

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

2. Converting Date Format

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. Handling Special Characters and Escape Sequences

What are Special Characters?

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

특수 문자를 포함한 문자열 교체

예제 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 = "HellonWorldnJavaScript";
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에 대한 유용한 정보를 제공할 예정이니 기대해 주세요!

広告