Регулярные выражения для новичков

Что такое регулярные выражения?

Если вам когда-нибудь приходилось работать с командной строкой, вы, вероятно, использовали маски имён файлов. Например, чтобы удалить все файлы в текущей директории, которые начинаются с буквы “d”, можно написать rm d* .

Регулярные выражения представляют собой похожий, но гораздо более сильный инструмент для поиска строк, проверки их на соответствие какому-либо шаблону и другой подобной работы. Англоязычное название этого инструмента - Regular Expressions или просто RegExp . Строго говоря, регулярные выражения - специальный язык для описания шаблонов строк.

Реализация этого инструмента различается в разных языках программирования, хоть и не сильно. В данной статье мы будем ориентироваться в первую очередь на реализацию Perl Compatible Regular Expressions.

Основы синтаксиса

В первую очередь стоит заметить, что любая строка сама по себе является регулярным выражением. Так, выражению Хаха, очевидно, будет соответствовать строка “Хаха” и только она. Регулярные выражения являются регистрозависимыми, поэтому строка “хаха” (с маленькой буквы) уже не будет соответствовать выражению выше.

Однако уже здесь следует быть аккуратным - как и любой язык, регулярные выражения имеют спецсимволы, которые нужно экранировать. Вот их список: . ^ $ * + ? { } \ | () . Экранирование осуществляется обычным способом - добавлением \ перед спецсимволом.

Набор символов

Предположим, мы хотим найти в тексте все междометия, обозначающие смех. Просто Хаха нам не подойдёт - ведь под него не попадут “Хехе”, “Хохо” и “Хихи”. Да и проблему с регистром первой буквы нужно как-то решить.

Здесь нам на помощь придут наборы - вместо указания конкретного символа, мы можем записать целый список, и если в исследуемой строке на указанном месте будет стоять любой из перечисленных символов, строка будет считаться подходящей. Наборы записываются в квадратных скобках - паттерну будет соответствовать любой из символов “a”, “b”, “c” или “d”.

Внутри набора бо льшая часть спецсимволов не нуждается в экранировании, однако использование \ перед ними не будет считаться ошибкой. По прежнему необходимо экранировать символы “\” и “^”, и, желательно, “]” (так, обозначает любой из символов “]” или «[», тогда как [х] – исключительно последовательность “[х]”). Необычное на первый взгляд поведение регулярок с символом “]” на самом деле определяется известными правилами, но гораздо легче просто экранировать этот символ, чем их запоминать. Кроме этого, экранировать нужно символ «-», он используется для задания диапазонов (см. ниже).

Если сразу после [ записать символ ^ , то набор приобретёт обратный смысл - подходящим будет считаться любой символ кроме указанных. Так, паттерну [^xyz] соответствует любой символ, кроме, собственно, “x”, “y” или “z”.

Итак, применяя данный инструмент к нашему случаю, если мы напишем [Хх][аоие]х[аоие] , то каждая из строк “Хаха”, “хехе”, “хихи” и даже “Хохо” будут соответствовать шаблону.

Предопределённые классы символов

Для некоторых наборов, которые используются достаточно часто, существуют специальные шаблоны. Так, для описания любого пробельного символа (пробел, табуляция, перенос строки) используется \s , для цифр - \d , для символов латиницы, цифр и подчёркивания “_” - \w .

Если необходимо описать вообще любой символ, для этого используется точка - . . Если указанные классы написать с заглавной буквы (\S , \D , \W) то они поменяют свой смысл на противоположный - любой непробельный символ, любой символ, который не является цифрой, и любой символ кроме латиницы, цифр или подчёркивания соответственно.

Также с помощью регулярных выражений есть возможность проверить положение строки относительно остального текста. Выражение \b обозначает границу слова, \B - не границу слова, ^ - начало текста, а $ - конец. Так, по паттерну \bJava\b в строке “Java and JavaScript” найдутся первые 4 символа, а по паттерну \bJava\B - символы c 10-го по 13-й (в составе слова “JavaScript”).

Диапазоны

У вас может возникнуть необходимость обозначить набор, в который входят буквы, например, от “б” до “ф”. Вместо того, чтобы писать [бвгдежзиклмнопрстуф] можно воспользоваться механизмом диапазонов и написать [б-ф] . Так, паттерну x соответствует строка “xA6”, но не соответствует “xb9” (во-первых, из-за того, что в диапазоне указаны только заглавные буквы, во-вторых, из-за того, что 9 не входит в промежуток 0-8).

Механизм диапазонов особенно актуален для русского языка, ведь для него нет конструкции, аналогичной \w . Чтобы обозначить все буквы русского алфавита, можно использовать паттерн [а-яА-ЯёЁ] . Обратите внимание, что буква “ё” не включается в общий диапазон букв, и её нужно указывать отдельно.

Квантификаторы (указание количества повторений)

Вернёмся к нашему примеру. Что, если в “смеющемся” междометии будет больше одной гласной между буквами “х”, например “Хаахаааа”? Наша старая регулярка уже не сможет нам помочь. Здесь нам придётся воспользоваться квантификаторами.

Обратите внимание, что квантификатор применяется только к символу, который стоит перед ним.

Некоторые часто используемые конструкции получили в языке регулярных выражений специальные обозначения:

Таким образом, с помощью квантификаторов мы можем улучшить наш шаблон для междометий до [Хх][аоеи]+х[аоеи]* , и он сможет распознавать строки “Хааха”, “хееееех” и “Хихии”.

Ленивая квантификация

Предположим, перед нами стоит задача - найти все HTML-теги в строке

Tproger - мой любимый сайт о программировании!

Очевидное решение <.*> здесь не сработает - оно найдёт всю строку целиком, т.к. она начинается с тега абзаца и им же заканчивается. То есть содержимым тега будет считаться строка

P>Tproger - мой любимый сайт о программировании!

Это происходит из-за того, что по умолчанию квантификатор работают по т.н. жадному алгоритму - старается вернуть как можно более длинную строку, соответствующую условию. Решить проблему можно двумя способами. Первый - использовать выражение <[^>]*> , которое запретит считать содержимым тега правую угловую скобку. Второй - объявить квантификатор не жадным, а ленивым . Делается это с помощью добавления справа к квантификатору символа? . Т.е. для поиска всех тегов выражение обратится в <.*?> .

Ревнивая квантификация

Иногда для увеличения скорости поиска (особенно в тех случаях, когда строка не соответствует регулярному выражению) можно использовать запрет алгоритму возвращаться к предыдущим шагам поиска для того, чтобы найти возможные соответствия для оставшейся части регулярного выражения. Это называется ревнивой квантификацией. Квантификатор делается ревнивым с помощью добавления к нему справа символа + . Ещё одно применение ревнивой квантификации - исключение нежелательных совпадений. Так, паттерну ab*+a в строке “ababa” будут соответствовать только первые три символа, но не символы с третьего по пятый, т.к. символ “a”, который стоит на третьей позиции, уже был использован для первого результата.

Скобочные группы

Для нашего шаблона “смеющегося” междометия осталась самая малость - учесть, что буква “х” может встречаться более одного раза, например, “Хахахахааахахооо”, а может и вовсе заканчиваться на букве “х”. Вероятно, здесь нужно применить квантификатор для группы [аиое]+х, но если мы просто напишем [аиое]х+ , то квантификатор + будет относиться только к символу “х”, а не ко всему выражению. Чтобы это исправить, выражение нужно взять в круглые скобки: ([аиое]х)+ .

Таким образом, наше выражение превращается в [Хх]([аиое]х?)+ - сначала идёт заглавная или строчная “х”, а потом произвольное ненулевое количество гласных, которые (возможно, но не обязательно) перемежаются одиночными строчными “х”. Однако это выражение решает проблему лишь частично - под это выражение попадут и такие строки, как, например, “хихахех” - кто-то может быть так и смеётся, но допущение весьма сомнительное. Очевидно, мы можем использовать набор из всех гласных лишь единожды, а потом должны как-то опираться на результат первого поиска. Но как?…

Запоминание результата поиска по группе (обратная связь)

Оказывается, результат поиска по скобочной группе записывается в отдельную ячейку памяти, доступ к которой доступен для использования в последующих частях регулярного выражения. Возвращаясь к задаче с поиском HTML-тегов на странице, нам может понадобиться не только найти теги, но и узнать их название. В этом нам может помочь регулярное выражение <(.*?)> .

Tproger - мой любимый сайт о программировании!

Результат поиска по всем регулярному выражению: “

”, “”, “”, “”, “”, “

”.
Результат поиска по первой группе: “p”, “b”, “/b”, “i”, “/i”, “/i”, “/p”.

На результат поиска по группе можно ссылаться с помощью выражения \n , где n - цифра от 1 до 9. Например выражению (\w)(\w)\1\2 соответствуют строки “aaaa”, “abab”, но не соответствует “aabb”.

Если выражение берётся в скобки только для применения к ней квантификатора (не планируется запоминать результат поиска по этой группе), то сразу первой скобки стоит добавить?: , например (?:+\w) .

С использованием этого механизма мы можем переписать наше выражение к виду [Хх]([аоие])х?(?:\1х?)* .

Перечисление

Чтобы проверить, удовлетворяет ли строка хотя бы одному из шаблонов, можно воспользоваться аналогом булевого оператора OR, который записывается с помощью символа | . Так, под шаблон Анна|Одиночество попадают строки “Анна” и “Одиночество” соответственно. Особенно удобно использовать перечисления внутри скобочных групп. Так, например (?:a|b|c|d) полностью эквивалентно (в данном случае второй вариант предпочтительнее в силу производительности и читаемости).

Регулярные выражения (RegExp ) - это очень эффективный способ работы со строками.

Составив регулярное выражение с помощью специального синтаксиса вы можете:

• искать текст в строке
• заменять подстроки в строке
• извлекать информацию из строки

Почти во всех языках программирования есть регулярные выражения. Есть небольшие различия в реализации, но общие концепции применяются практически везде.

Регулярные выражения относятся к 1950-м годам, когда они были формализованы как концептуальный шаблон поиска для алгоритмов обработки строк.

Регулярные выражения реализованные в UNIX, таких как grep, sed и популярных текстовых редакторах, начали набирать популярность и были добавлены в язык программирования Perl, а позже и в множество других языков.

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

Сложно, по полезно

Новичкам регулярные выражения могут показаться абсолютной ерундой, а зачастую даже и профессиональным разработчикам, если не вкладывать время необходимое для их понимания.

Регулярные выражения сложно писать , сложно читать и сложно поддерживать/изменять .

Но иногда регулярные выражения это единственный разумный способ выполнить какие-то манипуляции над строками, поэтому они являются очень ценным инструментом.

Это руководство нацелено на то чтобы самым простым способом дать вам некоторое представление о регулярных выражениях в JavaScript и предоставить информацию о том как читать и создавать регулярные выражения.

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

Как выглядят регулярные выражения

В JavaScript регулярные выражения это объект, который может быть определён двумя способами.

Первый способ заключается в создании нового объекта RegExp с помощью конструктора:

Const re1 = new RegExp("hey")

Второй способ заключается в использовании литералов регулярных выражений :

Const re1 = /hey/

Вы знаете что в JavaScript есть литералы объектов и литералы массивов ? В нём также есть литералы regexp .

В приведённом выше примере hey называется шаблоном . В литеральной форме он находится между двумя слэшами, а в случае с конструктором объекта, нет.

Это первое важное отличие между двумя способами определения регулярных выражений, остальные мы увидим позже.

Как они работают?

Регулярное выражение, которое мы определили выше как re1 , очень простое. Оно ищет строку hey без каки-либо ограничений: строка может содержать много текста, а слово hey находиться где-то в середине и регулярное выражение сработает. Строка может содержать только слово hey и регулярка опять сработает.

Это довольно просто.

Вы можете попробовать протестировать регулярное выражение с помощью метода RegExp.test(String) , который возвращает логическое (boolean) значение:

Re1.test("hey") // ✅ re1.test("blablabla hey blablabla") // ✅ re1.test("he") // ❌ re1.test("blablabla") // ❌

В примере выше мы просто проверили удовлетворяет ли "hey" шаблону регулярного выражения, который храниться в re1 .

Это проще простого, но вы уже знаете много о регулярных выражениях.

Закрепление

/hey/

сработает независимо от того где находится hey внутри строки.

Если вы хотите найти строки, которые начинаются с hey , то используйте оператор ^ :

/^hey/.test("hey") // ✅ /^hey/.test("bla hey") // ❌

Если вы хотите найти строки, которые заканчиваются на hey , то используйте оператор $ :

/hey$/.test("hey") // ✅ /hey$/.test("bla hey") // ✅ /hey$/.test("hey you") // ❌

Объединяя два предыдущих оператора вы можете найти строку, которая полностью совпадает с hey:

/^hey$/.test("hey") // ✅

Чтобы найти строку начинающуюся с одной подстроки, а заканчивающуюся другой подстрокой вы можете использовать.* , который будет совпадать с любым символом повторяющимся 0 или более раз:

/^hey.*joe$/.test("hey joe") // ✅ /^hey.*joe$/.test("heyjoe") // ✅ /^hey.*joe$/.test("hey how are you joe") // ✅ /^hey.*joe$/.test("hey joe!") // ❌

Поиск элементов по диапазону

Вместо того чтобы искать определённую строку, вы можете указать диапазон символов, например:

// // a, b, c, ... , x, y, z // // A, B, C, ... , X, Y, Z // // a, b, c // // 0, 1, 2, 3, ... , 8, 9

Эти регулярные выражения ищут строки, которые содержат хотя бы один символ из выбранного диапазона:

//.test("a") // ✅ //.test("1") // ❌ //.test("A") // ❌ //.test("d") // ❌ //.test("dc") // ✅

Диапазоны можно комбинировать:

// //.test("a") // ✅ //.test("1") // ✅ //.test("A") // ✅

Поиск многократных совпадений элемента диапазона

Вы можете проверить содержит ли строка только один символ из диапазона с помощью символа - :

/^$/ /^$/.test("A") // ✅ /^$/.test("Ab") // ❌

Инверсия шаблона

Символ ^ в начале шаблона привязывает его к началу строки.

Использование этого символа внутри диапазона инвертирует диапазон, поэтому:

/[^A-Za-z0-9]/.test("a") // ❌ /[^A-Za-z0-9]/.test("1") // ❌ /[^A-Za-z0-9]/.test("A") // ❌ /[^A-Za-z0-9]/.test("@") // ✅

Метасимволы

• \d совпадает с любым числом, эквивалентно
• \D совпадает с любым символом, который не является числом, эквивалентно [^0-9]
• \w совпадает с любым буквенно-числовым символом, эквивалентно
• \W совпадает с любым символом, который не является буквенно-числовым значением, эквивалентно [^A-Za-z0-9]
• \s совпадает с любым пробельным символом: пробел, табуляция, символ новой строки и пробелы Unicode
• \S совпадает с любым символом, который не является пробелом
• \0 совпадает с null
• \n совпадает с символом новой строки
• \t совпадает с символом табуляции
• \uXXXX совпадает с символом Unicode с кодом XXXX (требуется флаг u)
• . совпадает с любым символовом, кроме символа новой строки (таким как \n) (если вы не используете флаг s , объясним позже)
• [^] совпадает с любым символом, включая символ новой строки. Полезно при работе с многострочными строками

Выбор в регулярных выражениях

Если вы хотите выбрать одну или другую строку, используйте оператор | .

/hey|ho/.test("hey") // ✅ /hey|ho/.test("ho") // ✅

Квантификаторы

Представьте что у вас есть регулярное выражение, которое проверяет строку на то чтобы она состояла только из одной цифры:

Вы можете использовать квантификатор ? , который сделает этот символ необязательным. В нашем случае цифра должна встречаться 0 или 1 раз:

но что если мы хотим чтобы регулярное выражение срабатывало на несколько цифр?

Вы можете сделать это 4 способами, используя + , * , {n} и {n,m} .

+

Совпадает с одним или более (>=1) элементами:

/^\d+$/ /^\d+$/.test("12") // ✅ /^\d+$/.test("14") // ✅ /^\d+$/.test("144343") // ✅ /^\d+$/.test("") // ❌ /^\d+$/.test("1a") // ❌

*

Совпадает с 0 или более (>=0) элементами:

/^\d+$/ /^\d*$/.test("12") // ✅ /^\d*$/.test("14") // ✅ /^\d*$/.test("144343") // ✅ /^\d*$/.test("") // ✅ /^\d*$/.test("1a") // ❌

{n}

Совпадает точно с n количеством элементов:

/^\d{3}$/ /^\d{3}$/.test("123") // ✅ /^\d{3}$/.test("12") // ❌ /^\d{3}$/.test("1234") // ❌ /^{3}$/.test("Abc") // ✅

{n,m}

Совпадает с диапазоном от n до m элементов:

/^\d{3,5}$/ /^\d{3,5}$/.test("123") // ✅ /^\d{3,5}$/.test("1234") // ✅ /^\d{3,5}$/.test("12345") // ✅ /^\d{3,5}$/.test("123456") // ❌

m можно опустить и оставить второй предел без ограничений, чтобы было минимум n элементов:

/^\d{3,}$/ /^\d{3,}$/.test("12") // ❌ /^\d{3,}$/.test("123") // ✅ /^\d{3,}$/.test("12345") // ✅ /^\d{3,}$/.test("123456789") // ✅

Опциональные элементы

Следующий за элементом знак? , сделает его необязательным:

/^\d{3}\w?$/ /^\d{3}\w?$/.test("123") // ✅ /^\d{3}\w?$/.test("123a") // ✅ /^\d{3}\w?$/.test("123ab") // ❌

Группы

Используя круглые скобки, вы можете создавать группы символов (...) .

Пример ниже ищет точное совпадение из 3 цифр за которым следует один или более буквенно-числовые символов:

/^(\d{3})(\w+)$/ /^(\d{3})(\w+)$/.test("123") // ❌ /^(\d{3})(\w+)$/.test("123s") // ✅ /^(\d{3})(\w+)$/.test("123something") // ✅ /^(\d{3})(\w+)$/.test("1234") // ✅

Повторяющиеся символы, которые находятся после закрывающей группу скобки, относятся ко всей группе:

/^(\d{2})+$/ /^(\d{2})+$/.test("12") // ✅ /^(\d{2})+$/.test("123") // ❌ /^(\d{2})+$/.test("1234") // ✅

Захват групп

До сих пор мы видели, как тестировать строки и проверять, содержат ли они определенный шаблон.

Крутая возможность регулярных выражений заключается в том, что можно захватывать определённые части строки и складывать их в массив.

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

По умолчанию, группы итак захватываются. Теперь вместо использования RegExp.test(String) , который просто возвращает логическое значение, мы будем использовать один из следующих методов:

• String.match(RegExp)
• RegExp.exec(String)

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

Если совпадений не найдено, то он возвращает null .

"123s".match(/^(\d{3})(\w+)$/) //Array [ "123s", "123", "123s" ] /^(\d{3})(\w+)$/.exec("123s") //Array [ "123s", "123", "s" ] "hey".match(/(hey|ho)/) //Array [ "hey", "hey" ] /(hey|ho)/.exec("hey") //Array [ "hey", "hey" ] /(hey|ho)/.exec("ha!") //null

Когда группа совпадает несколько раз, то только последнее найденное значение будет добавлено в возвращаемый массив.

"123456789".match(/(\d)+/) //Array [ "123456789", "9" ]

Опциональные группы

Захват групп можно сделать опциональным с помощью (...)? . Если ничего не будет найдено, то в возвращаемый массив будет добавлен элемент undefined:

/^(\d{3})(\s)?(\w+)$/.exec("123 s") //Array [ "123 s", "123", " ", "s" ] /^(\d{3})(\s)?(\w+)$/.exec("123s") //Array [ "123s", "123", undefined, "s" ]

Ссылка на найденную группу

Каждой найденной группе присваивается число. $1 ссылается на первый элемент, $2 на второй, и так далее. Это полезно, когда мы будет говорить о замене части строки.

Именованный захват групп

Это новая возможность ES2018.

Группе можно назначить имя, а не просто слот в возвращаемом массиве:

Const re = /(?\d{4})-(?\d{2})-(?\d{2})/ const result = re.exec("2015-01-02") // result.groups.year === "2015"; // result.groups.month === "01"; // result.groups.day === "02";

Использование match и exec без групп

Существует разница при использовании match и exec без групп: в первом элементе массива будет находится не полностью найденная строка, а прямое совпадение:

/hey|ho/.exec("hey") // [ "hey" ] /(hey).(ho)/.exec("hey ho") // [ "hey ho", "hey", "ho" ]

Незахватываемые группы

Так как по умолчанию группы являются захватываемыми, нам нужен способ игнорировать некоторые группы в возвращаемом массиве. Это возможно с помощью незахватываемых групп , которые начинаются с (?:...) .

"123s".match(/^(\d{3})(?:\s)(\w+)$/) // null "123 s".match(/^(\d{3})(?:\s)(\w+)$/) // Array [ "123 s", "123", "s" ]

Флаги

Вы можете использовать следующие флаги на любых регулярных выражениях:

• g: ищет совпадения глобально
• i: делает регулярное выражение не чувствительным к регистру
• m: включает многострочный режим. В этом режиме ^ и $ совпадают с началом и концом всей строки. Без этого флага, с многострочными строками они совпадают с началом и концом каждой строки.
• u: включает поддержку Unicode (добавлено в ES6/ES2015)
• s: (новое в ES2018) сокращение от "single line", он позволяет. совпадать с символами новой строки

Флаги можно комбинировать, а также они добавляются в конец строки литерала:

/hey/ig.test("HEy") // ✅

или передаются вторым параметром в конструктор объекта RegExp:

New RegExp("hey", "ig").test("HEy") // ✅

Инспектирование регулярных выражений

Вы можете инспектировать свойства регулярных выражений:

• source - строка шаблона
• multiline - принимается значение true если установлен флаг m
• global - принимается значение true если установлен флаг g
• ignoreCase - принимается значение true если установлен флаг i
• lastIndex

/^(\w{3})$/i.source //"^(\\d{3})(\\w+)$" /^(\w{3})$/i.multiline //false /^(\w{3})$/i.lastIndex //0 /^(\w{3})$/i.ignoreCase //true /^(\w{3})$/i.global //false

Экранирование

Специальные символы:

Это специальные символы потому что они являются управляющими символами при составлении шаблонов регулярных выражений, поэтому если вы хотите использовать их для поиска совпадений внутри шаблона, то вам нужно экранировать их с помощью символа обратного слэша:

/^\\$/ /^\^$/ // /^\^$/.test("^") ✅ /^\$$/ // /^\$$/.test("$") ✅

Границы строк

\b и \B позволяют определить находится ли строка в начале или конце слова:

• \b совпадает если набор символов находится в начале или конце слова
• \B совпадает если набор символов не находится в начале или конце слова

"I saw a bear".match(/\bbear/) //Array ["bear"] "I saw a beard".match(/\bbear/) //Array ["bear"] "I saw a beard".match(/\bbear\b/) //null "cool_bear".match(/\bbear\b/) //null

Замена с помощью регулярных выражений

Мы уже видели как нужно проверять строки на совпадение с шаблоном.

Также мы видели как можно извлекать часть строк соотвествующие шаблону в массив.

Теперь давайте рассмотрим как заменять части строки на основе шаблона.

У объекта String в JavaScript есть метод replace() , который можно использовать без регулярных выражений для одной замены в строке:

"Hello world!".replace("world", "dog") //Hello dog! "My dog is a good dog!".replace("dog", "cat") //My cat is a good dog!

Этот метод также может принимать и регулярное выражение в качестве аргумента:

"Hello world!".replace(/world/, "dog") //Hello dog!

Использование флага g - это единственный способ заменить несколько вхождений в строке на ванильном JavaScript:

"My dog is a good dog!".replace(/dog/g, "cat") //My cat is a good cat!

Группы позволяют нам делать больше причудливых вещей, менять местами части строк:

"Hello, world!".replace(/(\w+), (\w+)!/, "$2: $1!!!") // "world: Hello!!!"

Вместо строки можно использовать функцию, чтобы делать ещё более интересные вещи. В неё будет передан ряд аргументов, таких как возвращают методы String.match(RegExp) или RegExp.exec(String) , где количество аргументов зависит от количества групп:

"Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => { console.log(first); console.log(second); return `${second.toUpperCase()}: ${first}!!!` }) //"WORLD: Hello!!!"

Жадность

Регулярные выражения называются жадными по умолчанию.

Что это значит?

Возьмём например это регулярное выражение:

/\$(.+)\s?/

Предполагается, что нам нужно извлечь из строки сумму в долларах:

/\$(.+)\s?/.exec("This costs $100") //0

но что если у нас есть больше слов после числа, это отвлекает

/\$(.+)\s?/.exec("This costs $100 and it is less than $200") //100 and it is less than $200

Почему? Потому что регулярное выражение после знака $ совпадает с любым символом.+ и не останавливается пока не достигнет конца строки. Затем он останавливается, потому что \s? делает конечное пространство необязательным.

Чтобы исправить это, нам нужно указать что регулярное выражение должно быть ленивым и найти наименьшее количество совпадений. Мы можем сделать это с помощью символа? после квантификатора:

/\$(.+?)\s/.exec("This costs $100 and it is less than $200") //100

Итак, символ? может означать разные вещи в зависимости от своего положения, поэтому он может быть и квантификатором и индикатором ленивого режима.

Опережение: соответствие строки в зависимости от того что за ней следует

Используйет?= для поиска совпадений в строке за которой следует определённая подстрока

/Roger(?=Waters)/ /Roger(?= Waters)/.test("Roger is my dog") //false /Roger(?= Waters)/.test("Roger is my dog and Roger Waters is a famous musician") //true

Выполняет обратную операцию и находит совпадений в строке за которыми не следует определённая подстрока:

/Roger(?!Waters)/ /Roger(?! Waters)/.test("Roger is my dog") //true /Roger(?! Waters)/.test("Roger is my dog and Roger Waters is a famous musician") //false

Ретроспектива: соответствие строки в зависимости от того что ей предшествует

Это новая возможность ES2018.

Опережение использует символ?= . Ретроспектива использует?<= :

/(?<=Roger) Waters/ /(?<=Roger) Waters/.test("Pink Waters is my dog") //false /(?<=Roger) Waters/.test("Roger is my dog and Roger Waters is a famous musician") //true

Инверсия ретроспективы использует?

/(?

Регулярные выражения и Unicode

Флаг u является обязательным при работе с Unicode строками, в частности когда может понадобится обрабатывать строки в астральных плоскостях, которые не включены в первые 1600 символов Unicode.

Например эмодзи, но и только они.

/^.$/.test("a") // ✅ /^.$/.test("?") // ❌ /^.$/u.test("?") // ✅

Поэтому, всегда используйте флаг u .

Unicode, как и обычные символы, может обрабатывать диапазоны:

//.test("a") // ✅ //.test("1") // ✅ /[?-?]/u.test("?") // ✅ /[?-?]/u.test("?") // ❌

JavaScript проверяет внутренние коды представления, поэтому? < ? < ? на самом деле \u1F436 < \u1F43A < \u1F98A . Посмотрите полный список эмодзи чтобы увидеть коды и узнать их порядок.

Экранирование свойств Unicode

Как мы говорили выше, в шаблоне регулярного выражения вы можете использовать \d чтобы найти совпадение на любую цифру, \s чтобы найти совпадение на любой символ кроме пробела, \w чтобы найти совпадение на любой буквенно-числовой символ и т. д.

Экранирование свойств Unicode - это возможность ES2018, которая добавляет очень крутую функцию, расширяя эту концепцию на всех Unicode символы и добавляя \p{} и \P{} .

У любого Unicode символа есть набор свойств. Например Script определяет семейство языков, ASCII - это логическое значение равное true для ASCII символов и т.д. Вы можете положить это свойство в фигурные скобки и регулярное выражение будет проверять чтобы его значение было истинным:

/^\p{ASCII}+$/u.test("abc") // ✅ /^\p{ASCII}+$/u.test("ABC@") // ✅ /^\p{ASCII}+$/u.test("ABC?") // ❌

ASCII_Hex_Digit - это ещё одно логическое свойство, которое проверяет содержит ли строка тольк валидные шестнадцатеричные цифры:

/^\p{ASCII_Hex_Digit}+$/u.test("0123456789ABCDEF") //✅ /^\p{ASCII_Hex_Digit}+$/u.test("h")

Существует много других логических свойств, которые вы можете проверить просто добавив их имя в фигурные скобки, включая Uppercase , Lowercase , White_Space , Alphabetic , Emoji и другие:

/^\p{Lowercase}$/u.test("h") // ✅ /^\p{Uppercase}$/u.test("H") // ✅ /^\p{Emoji}+$/u.test("H") // ❌ /^\p{Emoji}+$/u.test("??") // ✅

В дополнении к этим бинарным свойствам, вы можете проверить любое свойство символа Unicode чтобы соответствовало конкретному значению. В примере ниже я проверяю, записана ли строка в греческом или латинском алфавите:

/^\p{Script=Greek}+$/u.test("ελληνικά") // ✅ /^\p{Script=Latin}+$/u.test("hey") // ✅

Примеры

Извлечение числа из строки

Предположим, что есть строка содержащая только одно число, которое нужно извлечь. /\d+/ должен сделать это:

"Test 123123329".match(/\d+/) // Array [ "123123329" ]

Поиск E-mail адреса:

Простейший подход заключается в проверке безпробельных символов до и после знака @ , с помощью \S:

/(\S+)@(\S+)\.(\S+)/ /(\S+)@(\S+)\.(\S+)/.exec("[email protected]") //["[email protected]", "copesc", "gmail", "com"]

Однако, это упрощенный пример, так как под него попадает множество не валидных E-mail адресов.

Захват текста между двойными кавычками

Представим, что у вас есть строка, которая содержит текст заключённый в двойные кавычки и вам нужно извлечь этот текст.

Лучший способ сделать это - использовать захват групп , потому то мы знаем что наше совпадение должно начинаться и заканчиваться символом " , поэтому мы можем легко настроить шаблон, но также мы хотим удалить эти кавычки из результата.

Мы найдём то что нам нужно в result :

Const hello = "Hello "nice flower"" const result = /"([^"]*)"/.exec(hello) //Array [ "\"nice flower\"", "nice flower" ]

Получение содержимого из HTML тега

Например получить содержимое из тега span , допуская при этом любое количество аргументов у тега:

/]*>(.*?)<\/span>/ /]*>(.*?)<\/span>/.exec("test") // null /]*>(.*?)<\/span>/.exec("test") // ["test", "test"] /]*>(.*?)<\/span>/.exec("test") // ["test", "test"]

JavaScript - Урок 14. Регулярные выражения

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

Для начала разберемся, что же это такое.
Регулярное выражение - это инструкция, описывающая на специально разработанном языке (RegExp) закон "сходства" искомой строки с образцом.

Для чего это нужно? Например:

• Для организации поиска в тексте чего-либо.
• Для замены одной части подстрок другими.
• Для проверки корректности пользовательского ввода (наверно, вы не раз сталкивались с ситуацией, когда вводили адрес своей электронной почты в какую-либо форму и получали ошибку типа "Некорректный e-mail").

Не будем вдаваться в подробности, а посмотрим как задавать регулярные выражения. Существует два способа, в данной уроке мы рассмотрим один (создание в литеральной нотации):

Var p=/pattern/flags;

Где
pattern - шаблон, является основой регулярного выражения, определяющей критерии сопоставления строк. Состоит из литералов и метасимволов.
flags - флаги (модификаторы), задают дополнительные параметры сопоставления шаблона.

Var par=/+/i;

Здесь + - шаблон, буквально означающий следующее "любое количество цифр и букв 1 и более раз" (как задавать шаблон посмотрим чуть ниже).

i

Чтобы было понятнее о чем речь, рассмотрим пример. Предположим, что у нас есть форма, куда пользователь вводит свой e-mail и пароль. Мы хотим, чтобы при нажатии на кнопку "Зарегистрировать" осуществлялась проверка корректности ввода.

Код html-страницы будет следующим:

Javascript регулярные выражения

Форма регистрации

Итак, что же должна сделать функция prov_adress() ? Для начала нам нужны две переменные, в которые мы поместим значения, введенные пользователем:

function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; }

Теперь нам нужно задать образцы (регулярные выражения), с которыми мы и будем сравнивать то, что ввел пользователь. Здесь, я их просто приведу, о том, как их составлять поговорим позже:

function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; var adr_pattern=/+@+\.{2,5}/i; var par_pattern=/+/i; }

Теперь осуществляем проверку на сопоставление образцу. Для этого воспользуемся методом test объекта RegExp :

function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; var adr_pattern=/+@+\.{2,5}/i; var par_pattern=/+/i; var prov=adr_pattern.test(adr); var prov1=par_pattern.test(par); }

Строка adr_pattern.test(adr) означает следующее: проверить существование в строке adr последовательности, сопоставляющейся с регулярным выражением adr_pattern . Метод test возвращает логическое значение (true или false).

Нам осталось только указать в нашей функции, что делать в случае успешной (или неуспешной) проверки:

function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; var adr_pattern=/+@+\.{2,5}/i; var par_pattern=/+/i; var prov=adr_pattern.test(adr); var prov1=par_pattern.test(par); if (prov==true && prov1==true) { alert("Вы зарегистрированы!"); } else { alert("Введенные данные некорректны!"); } }

Готово, надеюсь, суть того, что мы делаем вы поняли. Но прежде, чем проверить работу нашего сценария, посмотрим, из чего же состоят наши регулярные выражения.

Возьмем регулярное выражение для нашего пароля - /+/i :

• /+/ - шаблон, в котором:
  • 0-9 - любая цифра.
  
  
  • a-z - любая строчная буква от a до z.
  
  
  • - квадратные скобки означают, что в шаблоне может присутствовать любой из перечисленных в них литералов (в нашем случае цифры и строчные буквы)
  
  
  • + - указывает, что данная часть шаблона (т.е. то, что в квадратных скобках) может повторяться один и более раз.
  
  


• i - флаг, означающий, что регистр символов не имеет значение.

Иными словами, наше регулярное выражение указывает, что пароль может содержать любое количество цифр и букв 1 и более раз (т.е. он может состоять из одной цифры, из одной буквы, из многих цифр, из многих букв, из цифр и букв).

Например, если пользователь введет в поле пароля "2", "a3b" или "leopard", то такой пароль будет считаться корректным. А если, он введет "ab&s" или "24?", то такой пароль корректным считаться не будет, т.к. он содержит спецсимволы, а мы их в регулярном выражении не разрешили.

Надеюсь теперь стало понятно как и зачем можно использовать регулярные выражения, осталось узнать принципы их составления. Собственно говоря, задача составления регулярного выражения сводится к созданию его шаблона. А шаблон, как вы помните, может состоять из литералов и метасимволов.

Начнем с самого простого - литералов:

• Каждый из таких символов представляет сам себя. Например, /abc/ - такому шаблону сопоставима только строка "abc".


• a-z - все строчные буквы от a до z. Например, /a-z/ - такому шаблону сопоставляются 26 строк: "a", "b", "c"... "z"


• A-Z - все заглавные буквы от A до Z.


• 0-9 - все цифры.

Если мы хотим указать, что цифр или букв может быть несколько, то придется использовать управляющие символы:

• * - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться 0 и более раз. Например, /ab*c/ - означает, что строка начинается с символа a, затем может быть сколько угодно символов b, после которых следует символ c. Т.е. это могут быть, например, такие строки: "ac", "abc", "abbbbbbc" и т.д.


• + - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться 1 и более раз. Например, /ab+c/ - означает, что строка начинается с символа a, затем может быть сколько угодно символов b (но не меньше 1), после которых следует символ c. Т.е. это могут быть, например, такие строки: "abc", "abbbbbbc" и т.д.


• . - указывает, что на этом месте может быть любой одиночный символ, кроме символа новой строки. Например, для шаблона /ab.c/ сопоставимы такие строки: "ab6c", "abxc", "ab=c" и т.д.


• ? - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться 0 или 1 раз. Например, /ab?c/ - означает, что строка начинается с символа a, затем может быть или не быть один символ b, после которого следует символ c. Т.е. это могут быть такие строки: "ac", "abc"


• {n} - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться ровно n раз. Например, /ab{3}c/ - означает, что строка начинается с символа a, затем идут 3 символа b, после которых следует символ c. Т.е. это будет строка "abbbc".


• {n,} - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться n и более раз. Например, /ab{3,}c/ - означает, что строка начинается с символа a, затем идут 3 или более символов b, после которых следует символ c. Т.е. это могут быть такие строки: "abbbc", "abbbbbbbc" и т.д.


• {n, m} - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться от n до m раз. Например, /ab{1,3}c/ - означает, что строка начинается с символа a, затем идут от 1 до 3 символов b, после которых следует символ c. Т.е. это могут быть такие строки: "abc", "abbc", "abbbc".


• - такой шаблон сопоставим с любым одиночным символом, принадлежащим множеству, определенному в скобках. Множество задается перечислением или указанием диапазона. Например, шаблону // могут быть сопоставимы строки: "a", "b", "c".


• [^] - такой шаблон сопоставим с любым одиночным символом, не принадлежащим множеству, определенному в скобках. Например, шаблону /[^abc]/ могут быть сопоставимы строки: "f", "x", "Z", но не могут быть сопоставимы строки: "a", "b", "c".


• ^ - указывает, что символы сопоставимы с началом строки. Например, шаблону /^abc/ могут быть сопоставимы строки: "abcd", "abcfh", но не могут быть сопоставимы строки: "dabc", "cbabc" и т.д.


• $ - указывает, что символы сопоставимы с концом строки. Например, шаблону /abc$/ могут быть сопоставимы строки: "dabc", "fhabc", но не могут быть сопоставимы строки: "abcd", "abccb" и т.д.


• | - указывает на несколько альтернативных шаблонов. Например, шаблону /ab|c/ будут сопоставимы строки: "ab" и "c".


• \ - служит для экранирования специальных символов, т.е. обратный слэш перед символом указывает на то, что он должен интерпретироваться как специальный. Например:
  • \d - соответствует любая цифра от 0 до 9.
  
  
  • \D - соответствует все, кроме цифры.
  
  
  • \s - соответствует пробел.
  
  
  • \S - соответствует все, кроме пробела.
  
  
  • \w - соответствует буква, цифра или знак подчеркивания.
  
  
  • \W - соответствует все, кроме буквы, цифры или знака подчеркивания.
  
  

Например, шаблону /x\d\d/ будут соответствовать строки: "x01", "x25" и т.д., но не будут соответствовать строки: "A15", "x0A"...

Также обратный слэш используется, чтобы специальный символ сделать литеральным. Например, если нам нужно найти строку "a*b", то мы зададим следующий шаблон /a\*b/.

Используя вышеперечисленные литералы и метасимволы, можно составлять какие угодно шаблоны (считай регулярные выражения). Давайте, например, посмотрим что же мы написали для шаблона e-mail в нашем примере:

Var adr_pattern=/+@+\.{2,5}/i;

Итак, мы указали, что в адресе электронной почты идут цифры, буквы и знаки подчеркивания 1 и более раз, затем следует символ @, затем снова идут цифры, буквы и знаки подчеркивания 1 и более раз, затем идет символ точки, после которой идут буквы от 2 до 5 раз. Примерно такой вид имеют адреса электронной почты.

Теперь, зная, что именно мы задали в образце, можно проверить работу примера:

new RegExp(pattern[, flags])

регелярное выражение ЗАРАНЕЕ

Известно, то предпочтительнее синтаксис литерала (/test/i).

Если же регулярное выражение заранее неизвестно, то предпочтительнее создавать регулярное выражение (в символьной строке) при помощи конструктора (new RegExp).

Но обратите внимание, так как "знак косой черты" \ играет роль переключения кода, то в строковом литереале (new RegExp) его приходится писать дважды: \\

Флаги

i игнорирование регистра при сопоставлении

g глобальное сопоставление, в отличие от локального (по умолчанию, совпадение только с первым экземпляром шаблоном) допускает совпадения со всеми экземплярами шаблона

Операторы

Что	Как	Описиние	Использование
i	флаг	делает рег. выражение не зависящим от регистра	/testik/i
g	флаг	глобальный поиск	/testik/g
m	флаг	допускает сопоставление со многими строками, которые могут быть получены из textarea
	оператор класса символов	сопоставление с набором символов	- любой символ в интервале от a до z;
^	оператор знак вставки	кроме	[^a-z] - любой символ КРОМЕ символов в интервале от a до z;
-	оператор дефис	указываем диапозон значений, включительно	- любой символ в интервале от a до z;
\	оператор экранирования	экранирует любой следующий символ	\\
^	оператор начала сопоставления	сопоставление с шаблоном должно произойти в начале	/^testik/g
$	оператор конца сопоставления	сопоставление с шаблоном должно произойти в конце	/testik$/g
?	оператор?	делает символ необязательным	/t?est/g
+	оператор +		/t+est/g
+	оператор +	символ должен присутстовать однократно или многократно	/t+est/g
*	оператор *	символ должен присутстовать однократно или многократно или вообще отсутствовать	/t+est/g
{}	оператор {}	задаем фиксированное число повторений символа	/t{4}est/g
{,}	оператор {,}	задаем число повторений символа в определенных пределах	/t{4,9}est/g

Предопределенные классы символов

Предопределенный член	Сопоставление
\t	горизонтальная табуляция
\n	Перевод строки
.	Любой символ, кроме Перевода строки
\d	Любая десят-я цифра, что равнозначно
\D	Любой символ, кроме десят-я цифры, что равнозначно [^0-9]
\w	Любой символ (цифры, буквы и знак подчеркивания) что равнозначно
\W	Любой символ, кроме цифр, букв и знака подчеркивания, что равнозначно [^A-Za-z0-9]
\s	Любой символ пробела
\S	Любой символ, кроме пробела
\b	Граница слова
\B	НЕ Граница слова, а его внутр. часть

Группирование ()

Если оператор, например, + (/(abcd)+/) требуется применить к группе члеров, то можно воспользоваться круглыми скобками () .

Фиксации

Часть регулярного выражения, заключенная в круглые скобки () , назывыется фиксацией .

Рассмотрим следующий пример:

/^()k\1/

\1 это не любой символ из a , b , c .
\1 это какой угодно символ, который инициирует совпадение с первым символом . То есть символ совпавший с \1 неизвестен до разрешения регулярного выражения.

Нефиксируемые группы

Скобки () используются в 2-х случаях: для группирования и для обозначение фиксаций. Но бывают ситуации, когда нам нужно использовать () только для группирования, так как фиксация не требуется, кроме того, убирая лишние фиксации мы облегчаем работу механизму обработки регулярных выражений.

Итак, чтобы предотвратить фиксацию перед открывающей круглой скобкой необходимо поставить: ?:

Str = "

"; found = str.match(/<(?:\/?)(?:\w+)(?:[^>]*?)>/i); console.log("found without fix: ", found); // [ "