Вступление

Замена всех или n вхождений подстроки в заданной строке - довольно распространенная проблема манипуляций со строками и обработки текста в целом. JavaScript предлагает несколько способов сделать это довольно легко.

В этом руководстве мы рассмотрим несколько примеров того, как заменить вхождения подстроки в строке с помощью JavaScript.

Мы будем работать с этим предложением:

 The grey-haired husky has one blue and one brown eye. 

Мы хотим заменить слово "blue" на "hazel" .

заменять()

Самый простой способ сделать это - использовать встроенную функцию 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/ 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. 

Примечание. Этот подход работает только для первого появления строки поиска. Чтобы заменить все вхождения, вы можете использовать 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. 

Обратите внимание, как заменяется только первое появление «синего», но не второе.

Обратите внимание, что на самом деле мы можем заменить все экземпляры строки при использовании подхода регулярных выражений и .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, мы можем использовать 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 можно заменить вхождения подстроки в строке.