Автор оригинала: David Landup.
Вступление
Замена всех или N Вхождения подстроки в данной строке представляют собой довольно распространенную проблему манипулирования строк и обработки текста в целом. JavaScript предлагает несколько способов сделать это довольно легко.
В этом уроке мы охватим некоторые примеры того, как заменить вхождения в зависимости от подстроки в строке, используя JavaScript.
Мы будем работать с этим предложением:
The grey-haired husky has one blue and one brown eye.
Мы захотим заменить слово "синий" с "Хейзел" Отказ
заменять()
Самый простой способ сделать это – использовать встроенный заменить () функция. Он принимает регулярное выражение в качестве первого аргумента, и слово (ы) мы заменяем старые как второй аргумент. Кроме того, он также принимает строку как первый аргумент.
Поскольку строки неизменяются в 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');
Результат был бы таким же. Разница между Regex Litalal и A Regexp Объект заключается в том, что литералы скомпилированы перед выполнением, в то время как объект составлен во время выполнения.
Первый более эффективный, если регулярное выражение остается постоянным, в то время как последний обычно используется, если регулярное выражение может быть динамичным, таким как выражение, определенное пользователем.
Чтобы выполнить замену нечувствительности к регистру, вы можете пройти Я Флаг к регулярному выражению:
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.
Без Я Флаг, Синий не совпадает с /синий/ Regex.
Наконец, вы можете использовать строку вместо регулярного выражения:
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.
Примечание: Этот подход работает только для первого вхождения строки поиска. Заменить Все Возмущения, вы можете использовать reforaceall () функция.
Если мы обновим строку:
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.
Обратите внимание, как заменяется только первое вхождение «синего», но не вторая.
Обратите внимание, что мы на самом деле может Замените все экземпляры строки при использовании подхода Regex и .replace () Отказ Чтобы это произошло, мы захочем использовать G Рейдкс флаг, который стоит «глобальный». Это соответствует всем экземплярам в строке. Например:
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);
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.
заменить все()
По состоянию на август 2020 года, как определено спецификацией ECMAScript 2021, мы можем использовать reforaceall () Функция для замены всех экземпляров строки.
Он принимает строку, которую мы ищем и строка, которую мы хотели бы заменить его с помощью:
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.
Сейчас Все Инстанции поискового слова были заменены.
Разделить () и присоединиться ()
Если reforaceall () Не поддерживается в вашем JavaScript Runtime, вы можете использовать доверие старого Сплит () и Присоединяйтесь () подход:
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);
Сплит () Функция разбивает строку в массив подстроек на данной строке – «синий» Отказ После расщепления у нас есть массив:
["The grey-haired husky has a ", " left eye and a ", " right eye."]
Затем, когда SE используют Присоединяйтесь () С помощью строки мы присоединяем к нему в исходное предложение, со строкой, передаваемой на функцию, вставленную в разрывы.
Теперь мы остались с Все вхождения оригинальной строки, замененной новым:
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.