Как работает Replace?

# Как работает Replace в JavaScript

Определение

replace() — это метод строк в JavaScript, который заменяет первое совпадение подстроки или паттерна в строке и возвращает новую строку. Оригинальная строка остается неизменной (строки в JavaScript immutable).

Синтаксис

const result = string.replace(searchValue, replaceValue);

• searchValue — строка или регулярное выражение для поиска
• replaceValue — строка или функция, на которую заменяем
• Возвращает — новую строку (оригинал не меняется)

1. Простая замена строки

const text = "Hello World, Hello JavaScript";
const result = text.replace("Hello", "Hi");

console.log(result); // "Hi World, Hello JavaScript"
//                      ↑ заменен только первый Hello!

Важно: replace() заменяет только первое совпадение. Если нужны все — используем replaceAll() или флаг g в регулярном выражении.

2. Замена с регулярным выражением

Без флага g (только первое совпадение)

const text = "apple apple apple";
const result = text.replace(/apple/, "orange");

console.log(result); // "orange apple apple"

С флагом g (все совпадения)

const text = "apple apple apple";
const result = text.replace(/apple/g, "orange");

console.log(result); // "orange orange orange"

С флагом i (игнорируем регистр)

const text = "Apple APPLE apple";
const result = text.replace(/apple/i, "orange");

console.log(result); // "orange APPLE apple" (только первое, любого регистра)

const result2 = text.replace(/apple/gi, "orange");
console.log(result2); // "orange orange orange" (все, любого регистра)

3. Замена функцией (callback)

Вместо строки можно передать функцию, которая будет вычислять замену:

const text = "Hello World, Hello JavaScript";

const result = text.replace(/Hello/g, function(match) {
  return match.toUpperCase(); // HELLO
});

console.log(result); // "HELLO World, HELLO JavaScript"

Параметры функции

const text = "I have 2 apples and 3 oranges";

const result = text.replace(/(\d+)\s+(\w+)/g, function(match, number, fruit, offset, string) {
  console.log(`match: ${match}`);
  console.log(`number: ${number}`);
  console.log(`fruit: ${fruit}`);
  console.log(`offset: ${offset}`);
  console.log(`string: ${string}`);
  
  return `${parseInt(number) * 2} ${fruit}`; // удваиваем количество
});

console.log(result); // "I have 4 apples and 6 oranges"

Параметры функции:

• match — совпадение (целая подстрока)
• group1, group2, ... — группы захвата из регулярного выражения
• offset — позиция совпадения в строке
• string — оригинальная строка

4. Использование групп захвата

const phone = "123-456-7890";
const formatted = phone.replace(/(\d{3})-(\d{3})-(\d{4})/, "($1) $2-$3");

console.log(formatted); // "(123) 456-7890"
//                        группы: $1, $2, $3

5. Практические примеры

Замена HTML тегов

const html = "<p>Hello <b>World</b></p>";
const plain = html.replace(/<[^>]*>/g, "");

console.log(plain); // "Hello World"

Преобразование camelCase в kebab-case

const camel = "userFirstName";
const kebab = camel.replace(/([A-Z])/g, "-$1").toLowerCase();

console.log(kebab); // "user-first-name"

Экранирование специальных символов

const text = "Price is $100 with 50% discount";
const escaped = text.replace(/[\$\%]/g, "\\$&");

console.log(escaped); // "Price is \\$100 with 50\\% discount"
// $& означает само совпадение

6. replaceAll() — замена всех совпадений

Вместо регулярного выражения с флагом g можно использовать replaceAll():

const text = "apple apple apple";

// Старый способ
const result1 = text.replace(/apple/g, "orange");

// Новый способ (ES2021+)
const result2 = text.replaceAll("apple", "orange");

console.log(result1); // "orange orange orange"
console.log(result2); // "orange orange orange"

Важные особенности

1. Строки immutable

const str = "Hello";
str.replace("H", "J"); // не меняет str!

console.log(str); // "Hello" (без изменений)

const newStr = str.replace("H", "J");
console.log(newStr); // "Jello" (новая строка)

2. Порядок замены важен

const text = "AAAA";

// Если заменяем AA на B
const result = text.replace(/AA/g, "B");
console.log(result); // "BB" (два совпадения AA)

// Но если заменяем по одной букве
const result2 = text.replace(/A/g, "B");
console.log(result2); // "BBBB" (четыре совпадения A)

3. Специальные символы в замене

const text = "Hello";

// $& — само совпадение
console.log(text.replace(/l+/, "[$&]")); // "He[ll]o"

// $` — текст до совпадения
console.log(text.replace(/l/, "[$`]")); // "He[$` = He]lo"

// $' — текст после совпадения
console.log(text.replace(/l/, "[$']")); // "He[lo]lo"

Производительность

Для множественных замен в большом тексте:

const text = "a".repeat(1000000);

// Медленнее: вызываем replace много раз
let result = text;
result = result.replace(/a/g, "b");
result = result.replace(/b/g, "c");

// Быстрее: одна замена с комплексным паттерном
const result2 = text.replace(/a/g, "c");

Вывод

replace() — это мощный и гибкий инструмент для работы со строками. Ключевые моменты:

• Первое совпадение — используй флаг /g или replaceAll() для всех
• Регулярные выражения — позволяют искать сложные паттерны
• Функции-callback — позволяют вычислять замену динамически
• Immutability — оригинальная строка не меняется
• Производительность — оптимизируй при работе с большими текстами