5 простых способов заменить все вхождения строк в JavaScript
8 марта 2023 г.Вы когда-нибудь были в ситуации, когда у вас была текстовая строка, и вы хотели заменить все ее вхождения чем-то другим? Это часто является проблемой для новичков, особенно в JavaScript.
Если вы разрабатываете приложение, работаете над веб-сайтом или пишете сценарий, вот пять простых способов замены всех вхождений строк в JavaScript.
Каждый метод имеет свой собственный набор вариантов использования и преимуществ. В любой ситуации вы обязательно найдете правильный подход к своему проекту.
Я покажу вам, как использовать встроенные методы из объекта String и из внешних библиотек, таких как lodash, кроме от более творческих методов, таких как использование регулярных выражений.
Итак, без лишних слов, давайте приступим к замене всех вхождений строк в JavaScript.
Использование метода String.prototype.replace()
Часто ли вам приходится заменять все вхождения слова или фразы в строке? Тогда вы обратились по адресу.
В JavaScript есть несколько методов замены строк, одним из которых является метод String.prototype.replace().
Этот метод имеет два обязательных параметра — подстроку, которую нужно заменить, и то, чем ее нужно заменить, — и два необязательных параметра — один ограничивает количество замен, а другой собирает совпадения в массив.
Давайте рассмотрим пример. Вы можете использовать этот метод, чтобы заменить все экземпляры «кошки» в предложении «Мне нравятся кошки» на «собаку»:
const newSentence = 'I like cats'.replace('cat', 'dog');
console.log(newSentence) // Output: I like dogs
Если вы хотите заменить более одного слова в предложении, просто добавьте их оба в первый параметр с регулярным выражением, например так:
const newSentence = 'I like cats'.replace(/cat|cats/, 'dog');
console.log(newSentence) // Output: I like dog
Использование String.prototype.replace() с функцией
Один из простых и понятных способов замены всех вхождений строк в JavaScript — использование вызова String.prototype.replace(). Этот метод принимает два параметра: целевую подстроку (строку, которую вы хотите найти и заменить) и замещающую строку (это то, чем вы хотите заменить целевую подстроку).
В некоторых случаях вам также может понадобиться передать функцию в качестве второго параметра вместо простой строки.
Это полезно в случаях, когда замещающая строка должна быть «динамической» или зависеть от контекста целевой подстроки.
Например, допустим, вы пишете программу, в которой много ссылок на устаревшие API, требующие обновления.
Вместо того, чтобы изменять каждую ссылку вручную, вы можете использовать String.prototype.replace() с функцией, которая будет проверять каждую ссылку по списку API и соответствующим образом обновлять ее.
Синтаксис выглядит примерно так: stringVar.replace(targetSubstring,(substring) => {return //ваш код здесь}, ).
Как видите, это невероятно мощный способ сравнительно легко заменить все вхождения строк в JavaScript!
Использование String.prototype.replaceAll()
Когда дело доходит до такой замены, метод String.prototype.replaceAll() является одним из самых простых и эффективных способов сделать это.
Это удобный инструмент для поиска и замены подстроки или шаблонов символов в большой строке.
Используя этот метод, вы можете легко заменить все вхождения символа или строки более крупной строкой.
Вот пример использования String.prototype.replaceAll():
let str = 'My name is John.';
// Replacement using replaceAll() method
str = str.replaceAll('John', 'Alice');
// Prints 'My name is Alice.'
console.log(str);
Поэтому все, что вам нужно сделать, это передать в функцию два параметра — подстроку, которую вы хотите заменить в исходной строке, и подстроку для замены (которая может быть другим словом, символом или фразой).
replaceAll() заменяет все вхождения «Джон» на «Алиса», так что «Меня зовут Джон» заменяется на «Меня зовут Алиса»!
Использование синтаксиса регулярных выражений JavaScript
Если шаблон, который вы хотите сопоставить, немного сложнее, вы можете рассмотреть возможность использования синтаксиса регулярных выражений JavaScript. Это невероятно мощное средство, которое может помочь вам легко заменить все вхождения определенной строки за один раз.
Давайте посмотрим, как это работает.
Вы можете использовать метод String replace() с регулярным выражением, указанным в качестве его первого аргумента. В этом регулярном выражении используются так называемые группы захвата, обозначаемые круглыми скобками < code>(), которые позволяют вам сопоставлять несколько строк, а затем обращаться к ним по отдельности позже.
Вторым аргументом replace() будет строка замены, которая будет использовать захваченные строки из регулярного выражения — в этом случае мы будем использовать $1 и < code>$2 для доступа к ним.
Допустим, вы хотите заменить все вхождения «JavaScript» в каком-либо тексте на «ECMAScript», тогда ваш код будет выглядеть так:
str = str.replace(/javascript/i, 'ECMAScript');
Здесь мы использовали /javascript/i в качестве нашего шаблона — обратите внимание на косую черту (/) на обоих концах — это означает, что мы сопоставляем любой экземпляр «JavaScript», независимо от его регистра. (флаг i обозначает это).
В нашей замещающей строке мы использовали «ECMAScript», чтобы он заменял любые вхождения «JavaScript» везде, где он появляется в нашем тексте.
Использование String.prototype.split() и Array.prototype.join()
Пятый вариант замены всех вхождений строк — использование методов String.prototype.split() и Array.prototype.join():
let str = 'hello world';
let newStr = str.split('o').join('O');
console.log(newStr); // hellO wOrld
Метод split() создаст массив, а метод join() объединит все элементы в массиве с выбранным символом или строкой.
Строка, передаваемая в метод split(), является разделителем, указывающим, на сколько частей или сегментов нужно разделить строку.
Он работает, просматривая каждый элемент массива, и когда он находит символ (или символы), которые соответствуют символу, указанному в split(), он делит этот массив на отдельные элементы на основе этих символов. , а затем полностью удаляет их из строки.
Вывод, созданный с помощью этого метода, можно легко использовать для цепочки других методов, что позволит вам делать более творческие вещи со своими строками:
let str = 'Hello World';
let newStr = str.split('l').join('').toUpperCase();
console.log(newStr); // HEO WORD
Заключение
В заключение, когда дело доходит до замены строк в JavaScript, вы можете использовать несколько различных подходов. Независимо от того, ищете ли вы простое решение простой задачи или более сложную проблему с регулярными выражениями, у вас есть возможность создать надежную программу, которая может обрабатывать любую необходимую вам логику замены строк.
С этими пятью простыми способами замены всех вхождений строк в JavaScript теперь вы можете уверенно решать любые задачи по замене строк, которые встречаются на вашем пути. Так что выходите и начинайте программировать!
Подробнее
:::информация Также опубликовано здесь.
:::
Оригинал