Фронтендщик

Фигурные скобки в регулярных выражениях JavaScriptОператоры '+', '*', '?' хороши, однако, с их помощью нельзя указать конкретное число повторений. В этом случае вам на помощь придет оператор {}.Работает он следующим образом: {5} - пять повторений, {2,5} – повторяется от двух до пяти (оба включительно), {2,} - повторяется два и более раз. Обратите внимание на то, что такого варианта - {,2}- нет. 📌 #instr || Фронтендщик

Список специальных символов и обычныхЕсли экранировать обычный символ - ничего страшного не случится - он все равно будет обозначать сам себя. Исключение - цифры, их нельзя экранировать.Часто возникает сомнение, является ли данный символ специальным. Некоторые доходят до того, что экранируют все подозрительные символы подряд. Однако, это плохая практика (захламляет регулярку обратными слешами).Являются спецсимволами: $ ^ . * + ? \ / {} [] () |Не являются спецсимволами: @ : , ' " ; - _ = < > % # ~ `& !📌 #instr || Фронтендщик

Визуально работает правильно (так как точка обозначает любой символ, в том числе и обычную точку '.'). Но если поменять строку, в которой происходят замены - мы увидим нашу ошибку:'a.x abx azx'.replace(/a.x/g, '!'); // вернет '! ! !', а ожидалось '! abx azx' 📌 #instr || Фронтендщик

ЗамечаниеОбратите внимание на то, что если вы забудете обратный слеш для точки (когда она должна обозначать сама себя) - этого можно даже не заметить:'a.x'.replace(/a.x/g, '!'); // вернет '!', как мы и хотели 📌 #instr || Фронтендщик

Пример А следующем примере автор забыл заэкранировать слеш и под регулярку попали все подстроки, так как незаэкранированная точка обозначает любой символ:let str = 'a.x abx azx';let res = str.replace(/a.x/g, '!'); В результате в переменную запишется следующее:'! ! !'📌 #instr || Фронтендщик

Пример В данном примере шаблон выглядит так: буква 'a', затем точка '.', затем буква 'x':let str = 'a.x abx azx';let res = str.replace(/a\.x/g, '!'); В результате в переменную запишется следующее:'! abx azx'📌 #instr || Фронтендщик

Пример В следующем примере автор регулярки хотел, чтобы шаблон поиска выглядел так: буква 'a', затем плюс '+', затем буква 'x'. Однако, автор кода не заэкранировал символ '+' и поэтому шаблон поиска самом деле он выглядит так: буква 'a'один или более раз, потом буква 'x':let str = 'a+x ax aax aaax';let res = str.replace(/a+x/g, '!'); 📌 #instr || Фронтендщик

Экранировка спецсимволов в регулярках JavaScriptПредположим, что мы хотим сделать так, чтобы спецсимвол обозначал сам себя. Для этого его нужно экранировать с помощью обратного слеша. Давайте посмотрим на примерах.📌 #instr || Фронтендщик

Пример В следующем примере шаблон поиска выглядит так: буква 'x', далее строка 'ab' один или более раз, потом буква 'x':let str = 'xabx xababx xaabbx'let res = str.replace(/x(ab)+x/g, '!'); В результате в переменную запишется следующее:'! ! xaabbx'📌 #instr || Фронтендщик

Группирующие скобки в регулярках JavaScriptВ предыдущих примерах операторы повторения действовали только на один символ, который стоял перед ними. Что делать, если мы хотим подействовать им на несколько символов?Для этого существуют группирующие скобки '(' и ')'. Они работают так: если что-то стоит в группирующих скобках и сразу после ')' стоит оператор повторения - он подействует на все, что стоит внутри скобок.Давайте посмотрим на примерах.📌 #instr || Фронтендщик

В результате в переменную запишется следующее:'xx ! ! ! xbx'Пример Найдем все подстроки по шаблону буква'x', буква 'a' ноль или более раз, буква 'x':let str = 'xx xax xaax xaaax xbx' let res = str.replace(/xa*x/g, '!'); В результате в переменную запишется следующее:'! ! ! ! xbx'📌 #instr || Фронтендщик

Пример Найдем все подстроки по шаблону буква'x', буква 'a' один или более раз, буква 'x':let str = 'xx xax xaax xaaax xbx'; let res = str.replace(/xa+x/g, '!'); 📌 #instr || Фронтендщик

Для этого существуют операторы (квантификаторы) повторения: плюс + (один и более раз), звездочка * (ноль или более раз) и вопрос ? (ноль или один раз). Эти операторы действуют на тот символ, который стоит перед ними.Давайте посмотрим на работу этих операторов на примерах.📌 #instr || Фронтендщик

Операторы повторения символов в регуляркахБывают ситуации, когда мы хотим указать, что символ повторяется заданное количество раз. Если мы знаем точное число повторений, то можно просто написать его несколько раз - /aaaa/. Но что делать, если мы хотим сказать такое: повторить один или более раз?📌 #instr || Фронтендщик

В следующем примере не указан модификатор g и регулярка найдет только первое совпадение:'aab'.replace(/a/, '!'); // вернет '!ab' А теперь регулярка найдет все совпадения:'aab'.replace(/a/g, '!'); // вернет '!!b' 📌 #instr || Фронтендщик

После ограничителей можно писать модификаторы - команды, которые изменяют общие свойства регулярного выражения. Например, модификатор g включает режим глобального поиска и замены - без него регулярка ищет только первое совпадение, а с ним - все совпадения.📌 #instr || Фронтендщик