Замена вхождения подстроки в строке JavaScript
Замена всех или n вхождений подстроки в заданной строке - довольно распространенная проблема манипуляций со строками и обработки текста в целом. JavaScript предлагает несколько способов сделать это довольно легко.
В этом руководстве мы рассмотрим несколько примеров того, как заменить вхождения подстроки в строке с помощью JavaScript.
Мы будем работать с этим предложением:
The grey-haired husky has one blue and one brown eye.
Мы хотим заменить слово "blue" на "hazel".
replace()
Самый простой способ сделать это - использовать встроенную функцию replace(). Она принимает регулярное выражение в качестве первого аргумента, а слова, которые мы заменяем старыми, в качестве второго аргумента. В качестве альтернативы он также принимает строку в качестве первого аргумента.
Поскольку строки в JavaScript неизменяемы, эта операция возвращает новую строку. Поэтому, если мы хотим сделать изменения постоянными, нам нужно будет присвоить результат новой строке при возврате.
Давайте посмотрим, как мы можем использовать функцию:
const regex = /blue/;
let originalStr = 'The grey-haired husky has one blue and one brown eye.';
let newStr = originalStr.replace(regex, 'hazel');
console.log(originalStr);
console.log(newStr);
Здесь мы использовали литерал регулярного выражения вместо создания экземпляра RegExp. Это приводит к:
The grey-haired husky has one blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.
В качестве альтернативы мы могли бы определить регулярное выражение как:
let regex = new RegExp('blue');
Результат был бы такой же. Разница между литералом регулярного выражения и объектом RegExp заключается в том, что литералы компилируются перед выполнением, а объект компилируется во время выполнения.
Первое более эффективно, если регулярное выражение остается постоянным, а второе обычно используется, если регулярное выражение может быть динамическим, например выражение, определенное пользователем.
Чтобы выполнить замену без учета регистра, вы можете передать флаг i в регулярное выражение:
const regex = /blue/i;
let originalStr = 'The grey-haired husky has one Blue and one brown eye.';
let newStr = originalStr.replace(regex, 'hazel');
console.log(originalStr);
console.log(newStr);
Теперь это приводит к:
The grey-haired husky has one Blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.
Без флага i строка Blue не будет соответствовать регулярному выражению /blue/.
Наконец, вы можете использовать строку вместо регулярного выражения:
let originalStr = 'The grey-haired husky has one blue and one brown eye.';
let newStr = originalStr.replace('blue', 'hazel');
console.log(originalStr);
console.log(newStr);
Это также приводит к:
The grey-haired husky has one blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.
Примечание: этот подход работает только для первого появления строки поиска. Чтобы заменить все вхождения, вы можете использовать функцию replaceAll().
Если мы обновим строку:
let originalStr = 'The grey-haired husky a blue left eye and a blue right eye.';
let newStr = originalStr.replace('blue', 'hazel');
Результат будет:
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a blue right eye.
Обратите внимание, как заменяется только первое появление «blue», но не второе.
Обратите внимание, что на самом деле мы можем заменить все экземпляры строки при использовании подхода регулярных выражений и .replace(). Чтобы это произошло, мы можем использовать флаг регулярного выражения g, который означает «global». Это соответствует всем экземплярам в строке. Например:
const regex = /blue/g;
let originalStr = 'The grey-haired husky a blue left eye and a blue right eye.';
let newStr = originalStr.replace(regex, 'hazel');
console.log(originalStr);
console.log(newStr);
replaceAll()
С августа 2020 года, как определено в спецификации ECMAScript 2021, мы можем использовать функцию replaceAll() для замены всех экземпляров строки.
Он принимает строку, которую мы ищем, и строку, которую мы хотели бы заменить:
let originalStr = 'The grey-haired husky has a blue left eye and a blue right eye.';
let newStr = originalStr.replaceAll('blue', 'hazel');
console.log(originalStr);
console.log(newStr);
Это приводит к:
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.
Теперь все вхождения поискового слова заменены.
split() и join()
Если replaceAll() не поддерживается в режиме исполнения JavaScript, вы можете использовать старый добрый подход split() и join():
let originalStr = 'The grey-haired husky has a blue left eye and a blue right eye.';
let newStr = originalStr.split('blue').join('hazel');
console.log(originalStr);
console.log(newStr);
Функция split() разбивает строку на массив подстрок по данной строке - 'blue'. После разделения у нас есть массив:
["The grey-haired husky has a ", " left eye and a ", " right eye."]
Затем, когда мы используем join(), мы соединяем ее обратно к исходному предложению, при этом строка передается функции, вставленной в разрывы.
Теперь у нас остались все вхождения исходной строки, замененной новой:
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.
Примечание. Хотя этот подход действительно работает, его не рекомендуется использовать, если доступен один из других ранее описанных методов. Причина этого в том, что цель этого подхода на первый взгляд не так очевидна, и поэтому код становится менее читабельным.
Вывод
В этой статье мы рассмотрели несколько примеров того, как можно заменить вхождения подстроки в строке с помощью JavaScript.
