Пример JavaScript String.Replace () с RegEx

Регулярные выражения (также называемые RegEx или RegExp) - мощный способ анализа текста. С помощью RegEx вы можете сопоставлять строки в точках, которые соответствуют определенным символам (например, JavaScript) или шаблонам (например, NumberStringSymbol - 3a &).

Этот .replaceметод используется в строках в JavaScript для замены частей строки символами. Часто его используют так:

const str = 'JavaScript'; const newStr = str.replace("ava", "-"); console.log(newStr); // J-Script 

Как вы можете видеть выше, метод replace принимает два аргумента: строку, которую нужно заменить, и то, чем строка будет заменена.

Здесь на помощь приходит Regex .

Использование .replaceвышеуказанного ограничено: заменяемые символы известны - «ava». Что, если вместо этого нас интересует паттерн? Может быть, число, две буквы и слово «foo» или три символа используются вместе?

.replaceМетод , используемый с RegExможет достичь этого. RegExможно эффективно использовать для воссоздания узоров. Таким образом, комбинируя это со .replaceсредствами, мы можем заменять шаблоны, а не только точные символы.

Как использовать RegExwith .replaceв JavaScript

replaceНапример, чтобы использовать RegEx, первый аргумент будет заменен синтаксисом регулярного выражения /regex/. Этот синтаксис служит шаблоном, в котором любые части строки, соответствующие ему, будут заменены новой подстрокой.

Вот пример:

// matches a number, some characters and another number const reg = /\d.*\d/ const str = "Java3foobar4Script" const newStr = str.replace(reg, "-"); console.log(newStr); // "Java-Script" 

Строка 3foobar4соответствует регулярному выражению /\d.*\d/, поэтому она заменяется.

Что, если бы мы хотели произвести замену в нескольких местах?

Regexуже предлагает это с g(глобальным) флагом, и то же самое можно использовать с replace. Вот как:

const reg = /\d{3}/g const str = "Java323Scr995ip4894545t"; const newStr = str.replace(reg, ""); console.log(newStr); // JavaScrip5t // 5 didn't pass the test :( 

Регулярное выражение соответствует частям строки, которые представляют собой ровно 3 последовательных числа. 323совпадает с ним, 995сопоставляет, 489сопоставляет и 454сопоставляет. Но последнее 5не соответствует шаблону.

В результате JavaScrip5tпоказано, как шаблоны правильно сопоставлены и заменены новой подстрокой (пустой строкой).

Флажок case - iтоже можно использовать. Это означает, что вы можете заменить шаблоны без учета регистра. Вот как это используется:

const reg1 = /\dA/ const reg2 = /\dA/i const str = "Jav5ascript" const newStr1 = str.replace(reg1, "--"); const newStr2 = str.replace(reg2, "--"); console.log(newStr1) // Jav5ascript console.log(newStr2) // Jav--script 

..5a..не соответствует первому синтаксису, потому что RegEx по умолчанию чувствителен к регистру. Но с использованием iфлага, как видно из второго синтаксиса, строка, как и ожидалось, заменяется.

Как использовать Split с регулярными выражениями

splitтакже использует RegEx. Это означает, что вы можете разбить строку не только на подстроки, которые соответствуют точным символам, но и по шаблонам.

Вот быстрый взгляд:

const regex = /\d{2}a/; const str = "Hello54 How 64aare you"; console.log(str.split(regex)) // ["Hello54 How ", "are you"] 

Строка была splitв, 64aпотому что эта подстрока соответствует указанному регулярному выражению.

Обратите внимание, что глобальный флаг - g- in не splitимеет значения, в отличие от iфлага и других флагов. Это связано с тем, splitчто строка разбивается по нескольким точкам, совпадающим с регулярным выражением.

Подведение итогов

RegExделает обработку replaceстрок в JavaScript более эффективной, мощной и увлекательной.

Вы ограничены не только конкретными символами, но и шаблонами и несколькими заменами одновременно. В этой статье мы увидели, как они работают вместе, на нескольких примерах.

Ура RegEx?