Как работает метод replace() в JavaScript

«Как работает метод replace() в JavaScript» — вопрос из категории JavaScript, который задают на 26% собеседований Node.js Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Метод String.prototype.replace() возвращает новую строку, в которой одно, несколько или все совпадения с шаблоном заменены на указанную замену. Исходная строка не изменяется.

Синтаксис:

const newString = originalString.replace(pattern, replacement);

Параметры:

  1. pattern — может быть строкой или регулярным выражением (RegExp).
  2. replacement — может быть строкой или функцией.

Ключевые особенности:

  • Если pattern — строка, заменяется только первое совпадение.
  • Для глобальной замены всех совпадений необходимо использовать регулярное выражение с флагом g.
  • В строке замены можно использовать специальные паттерны вроде $& (совпадение целиком), $` (текст до совпадения), $' (текст после совпадения).
  • Если replacement — функция, она выполняется для каждого совпадения, и ее возвращаемое значение используется как замена.

Примеры:

// 1. Базовая замена строки
const greeting = 'Hello, World!';
console.log(greeting.replace('World', 'Node.js')); // 'Hello, Node.js!'

// 2. Глобальная замена с RegExp
const spaces = 'a b c d';
console.log(spaces.replace(/s/g, '-')); // 'a-b-c-d'

// 3. Использование групп захвата в строке замены
const date = '2023-12-25';
console.log(date.replace(/(d{4})-(d{2})-(d{2})/, '$2/$3/$1')); // '12/25/2023'

// 4. Замена через функцию (полезно для сложной логики)
const celsius = 'Temperature is 25C';
const fahrenheit = celsius.replace(/(d+)C/, (match, p1) => {
    const tempC = parseInt(p1, 10);
    const tempF = (tempC * 9/5) + 32;
    return `${tempF}F`;
});
console.log(fahrenheit); // 'Temperature is 77F'

// 5. Практический пример в Node.js: санитизация ввода
function sanitizeInput(input) {
    return input
        .replace(/<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi, '') // Удалить теги <script>
        .replace(/&/g, '&amp;') // Экранировать HTML-сущности
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

const userInput = '<script>alert("xss")</script>Hello & World';
console.log(sanitizeInput(userInput)); // 'Hello &amp; World'

Важно: Для простой и глобальной замены подстроки на подстроку часто удобнее использовать метод replaceAll(), представленный в ES2021:

console.log('foo foo foo'.replaceAll('foo', 'bar')); // 'bar bar bar'