Как изменить часть строки в JS без лишних сложностей
Замена подстроки: основные методы
В JavaScript строки неизменяемы. Любой метод, который выглядит как изменение строки, возвращает новую строку. Для замены подстрок применяют методы replace и replaceAll. Выбор зависит от того, сколько совпадений нужно обработать и как задаётся подстрока.
Основной способ замены всех вхождений точной подстроки: replaceAll. Метод принимает строку или регулярное выражение. Если передана строка, она рассматривается буквально, без специального синтаксиса. Все непересекающиеся вхождения заменяются сразу.
let text = 'яблоко, яблоко, ещё яблоко';
let result = text.replaceAll('яблоко', 'груша');
console.log(result);Js split (разделение строк в javascript)
груша, груша, ещё груша
Js заменить (замена строк в javascript)
Такой способ подходит для обработки пользовательского ввода, замены названий, символов и любых точных фрагментов. Не потребуется регулярное выражение, а значит, не нужно думать об экранировании спецсимволов. Для старых окружений, где replaceAll недоступен, используют replace с глобальным регулярным выражением.
Если в replaceAll передать регулярное выражение без флага g, возникает ошибка TypeError. Регулярное выражение обязательно должно содержать глобальный флаг.
Как заменить только первое вхождение подстроки?
Метод replace со строкой в качестве первого аргумента заменяет только первое совпадение. Это удобно для исправления первого слова в тексте, замены первого вхождения разделителя или изменения одного элемента из нескольких одинаковых.
let text = 'один, два, один';
let result = text.replace('один', 'раз');
console.log(result);символы js (символы в javascript)
раз, два, один
Js замена (javascript: замена подстрок)
Как заменить все вхождения старой строки на новую?
Если окружение не поддерживает replaceAll, используют replace с регулярным выражением и флагом g. Регулярное выражение перебирает все совпадения в строке.
let text = 'a-b-a-b';
let result = text.replace(/a/g, 'x');
console.log(result);Match js (javascript: метод match())
x-b-x-b
Такой способ подходит для замены одного символа или простого регулярного шаблона. Для точной строки, которая содержит точки, звёздочки или скобки, придётся экранировать спецсимволы.
let text = '1.5 и 1.5';
let result = text.replace(/1\.5/g, '2.0');
console.log(result);2.0 и 2.0
Как заменить все вхождения без учёта регистра?
Для этого добавляют флаг i. Регулярное выражение находит и прописные, и строчные варианты.
let text = 'Кот, кот, КОТ';
let result = text.replace(/кот/gi, 'пёс');
console.log(result);пёс, пёс, пёс
Если нужно менять только слово целиком, а не его часть, добавляют границы слова \b.
let text = 'кот и котёнок';
let result = text.replace(/\bкот\b/gi, 'пёс');
console.log(result);пёс и котёнок
Как использовать функцию для создания замены?
Во втором аргументе replace можно передать функцию. Она получает совпадение и параметры, связанные с позицией и группами. Такой вариант используют, когда нужно пересчитать значение, изменить формат или применить условие.
let text = '2 яблока, 3 груши';
let result = text.replace(/\d+/g, (match) => Number(match) * 2);
console.log(result);4 яблока, 6 груши
Callback вызывается для каждого совпадения. Его возвращаемое значение попадает в итоговую строку.
Как заменить подстроку с изменением группы в регулярном выражении?
В строке замены можно ссылаться на группы из шаблона: $1, $2 и так далее. Это удобно для перестановки частей текста.
let date = '2024-05-01';
let result = date.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1');
console.log(result);01.05.2024
В строке $3 подставляет день, $2 месяц, $1 год.
Если в шаблоне нет нужной группы, $1 или другая ссылка будет вставлена как текст. Перед использованием группы нужно убедиться, что их количество соответствует числу скобок в регулярном выражении.
Практические примеры работы с заменами в строках
В этом разделе собраны примеры для разных задач. В каждом блоке показан исходный код и результат его выполнения.
Замена значений с добавлением символа валюты
let text = '5 яблок, 10 груш';
let result = text.replace(/\d+/g, '$$$&');
console.log(result);$5 яблок, $10 груш
В строке замены $$ вставляет знак доллара, а & подставляет найденную цифру.
Перестановка частей даты с именованными группами
let date = '2024-05-01';
let result = date.replace(
/(?\d{4})-(?\d{2})-(?\d{2})/,
'$<day>.$<month>.$<year>'
);
console.log(result); 01.05.2024
Именованные группы делают код читаемее. В строке замены ссылка на группу записывается как $<имя>.
Замена слова после пробела с помощью lookbehind
let text = 'foo barfoo foo baz';
let result = text.replace(/(?<=\s)foo/g, 'qux');
console.log(result);foo barfoo qux baz
Шаблон ?<=\s проверяет, что перед искомым словом находится пробел. Первое вхождение в начале строки не заменяется.
Замена по словарю
let text = 'one, two, three';
let words = { one: 'first', two: 'second', three: 'third' };
let result = text.replace(/\w+/g, (match) => words[match] || match);
console.log(result);first, second, third
Callback проверяет, есть ли слово в объекте. Если есть, подставляет значение из словаря, иначе оставляет совпадение без изменений.
Нумерация найденных совпадений
let counter = 0;
let text = 'a b c';
let result = text.replace(/\w/g, (match) => match + (++counter));
console.log(result);a1 b2 c3
Удаление лишних пробелов
let text = 'a b c';
let result = text.replace(/\s+/g, ' ');
console.log(result);a b c
Этот вариант применяется для нормализации текста.
Точка в регулярном выражении
let text = '1.5 и 1a5';
let wrong = text.replace(/1.5/g, '2.0');
console.log(wrong);
let correct = text.replace(/1\.5/g, '2.0');
console.log(correct);2.0 и 2.0 2.0 и 1a5
Точка в регулярном выражении обозначает любой символ. Для поиска литеральной точки используется запись \..
Смена порядка слов
let text = 'John Smith';
let result = text.replace(/(\w+)\s+(\w+)/, '$2 $1');
console.log(result);Smith John
Смена с помощью split и join
let text = 'a b a';
let result = text.split('a').join('x');
console.log(result);x b x
Этот приём работает без регулярных выражений. Строка делится на части по подстроке, а затем собирается с новой подстрокой между частями.
Сохранение регистра слова
let text = 'Кот, кот, КОТ';
let result = text.replace(/кот/gi, (match) => {
if (match === match.toUpperCase()) return 'ПЁС';
if (match[0] === match[0].toUpperCase()) return 'Пёс';
return 'пёс';
});
console.log(result);Пёс, пёс, ПЁС
Внутри callback можно анализировать исходное совпадение и выбирать нужную форму.