Javascript, регулярное выражение: примеры, проверка регулярных выражений. Шпаргалка по регулярным выражениям

Синтаксис регулярных выражений является достаточно сложным и его изучение требует серьёзных усилий. Наилучшим руководством по регулярным выражением на сегодняшний день является книга Дж. Фридла "Регулярные выражения", позволяющая, по словам автора, "научиться мыслить регулярными выражениями".

Основные понятия

Регулярное выражение (regular expression) - средство для обработки строк или последовательность символов, определяющая шаблон текста.

Модификатор - предназначен для "инструктирования" регулярного выражения.

Метасимволы - специальные символы, которые служат командами языка регулярных выражений.

Регулярное выражение задаётся как обычная переменная, только вместо кавычек используется слэш, например: var reg=/рег_выражение/

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

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

Создаём шаблон var reg=/р/ и воспользуясь методом replace осуществляем задуманное



var reg=/р/

document.write(result)

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

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

модификатор "g" - задаёт поиск в строке как "глобальный", т.е. в нашем случае замена произойдет для всех вхождений буквы "р". Теперь шаблон выглядит так: var reg=/р/g , подставив его в наш код


var str="Регулярные выражения"
var reg=/р/g
var result=str.replace(reg, "R")
document.write(result)

получим строку - РегуляRные выRажения .

модификатор "i" - задаёт поиск в строке без учёта регистра, добавив этот модификатор в наш шаблон var reg=/р/gi , после выполнения скрипта получим искомый результат нашей задачи - RегуляRные выRажения .

Специальные символы (метасимволы)

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

  • Метасимволы поиска совпадений.
  • Количественные метасимволы.
  • Метасимволы позиционирования.
Метасимволы поиска совпадений

Значение

Описание

граница слова

задаёт условие, при котором шаблон должен выполняться в начале или конце слова

/\ber/ совпадает с error , не совпадает с hero или с player
/er/ совпдает с player , не совпадает с hero или с error
/\ber\b/ не совпадает с hero или с player или с error , может совпасть только с er

не граница слова

задаёт условие, при котором шаблон не выполняется в начале или конце слова

/\Ber/ совпадает с hero или с player , не совпадает с error
/er\B/ совпадает с error или с player , не совпадает с hero
/\Ber\B/ совпадает с hero , не совпадает с player или с error

цифра от 0 до 9

/\d\d\d\d/ совпадает с любым четырёх значным числом

/\D\D\D\D/ не совпадёт с 2005 или 05.г или №126 и т.д.

одиночный пустой символ

соответствует символу пробела

\over\sbyte\ совпадает только с over byte

одиночный непустой символ

любой один символ за исключением пробела

\over\Sbyte\ совпадает с over-byte или с over_byte , не совпадает с over byte или over--byte

буква, цифра или символ подчёркивания

/A\w/ совпадает с A1 или с AB , не совпадает с A+

не буква, цифра или символ подчёркивания

/A\W/ не совпадает с A1 или с AB , совпадает с A+

любой символ

любые знаки, буквы, цифры и т.д.

/.../ совпадает с любыми тремя символами ABC или !@4 или 1 q

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

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

/WERTY/ совпадает с QWERTY , с AWERTY

набор не входящих символов

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

/[^QA]WERTY/ не совпадает с QWERTY , с AWERTY

Символы, приведенные в таблице "Метасимволы поиска совпадений" не надо путать с последовательностью знаков перехода используемых в строках, таких как \\t - табуляция, \\n - переход на новую строку и т.д.

Количественные метасимволы

Количество совпадений

Ноль и большее количество раз

/Ja*vaScript/ совпадает с JvaScript или с JaavaScript или с JaaavaScript , не совпадает с JovaScript

Ноль или один раз

/Ja?vaScript/ совпадает только с JvaScript или с JavaScript

Один и большее количество раз

/Ja+vaScript/ совпадает с JavaScript или с JaavaScript или с JaaavaScript , не совпадает с JvaScript

точно n раз

/Ja{2}vaScript/ совпадает только с JaavaScript

n или большее количество раз

/Ja{2,}vaScript/ совпадает с JaavaScript или с JaaavaScript , не совпадает с JvaScript или с JavaScript

по крайней мере, n раз, но не более чем m раз

/Ja{2,3}vaScript/ совпадает только с JaavaScript или с JaaavaScript

Каждый символ, приведенный в таблице "Количественные метасимволы" применяется к одному предшествующему символу или метасимволу в регулярном выражении.

Метасимволы позиционирования

Последний набор метасимволов предназначен для обозначения, где искать (если это важно) подстроку в начале строки или в конце.

Некоторые методы для работы с шаблонами

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

exec - данный метод выполняет сопоставление строки с образцом, заданным шаблоном. Если сопоставление с образцом закончилось неудачей, то возвращается значение null . В противном случае результатом является массив подстрок, соответствующих заданному образцу. /*Первый элемент массива будет равен исходной строке удовлетворяющее заданному шаблону*/

например:


var reg=/(\d+).(\d+).(\d+)/
var arr=reg.exec("Я родился 15.09.1980")
document.write("Дата рождения: ", arr, "< br>")
document.write("День рождения: ", arr, "< br>")
document.write("Месяц рождения: ", arr, "< br>")
document.write("Год рождения: ", arr, "< br>")

в результате получим четыре строки:
Дата рождения: 15.09.1980
День рождения: 15
Месяц рождения: 09
Год рождения: 1980

Заключение

В статье отображено далеко не все возможности и прелести регулярных выражений, для более глубокого изучения этого вопроса посоветую изучить объект RegExp. Так же хочу обратить внимание на то, что синтаксис регулярных выражений не чем не отличается как в JavaScript, так и в PHP. К примеру, для проверки правильности ввода e-mail, регулярное выражение, что для JavaScript, что для PHP будет выглядеть одинаково /+@+.{2,3}/i .

Регулярные выражения - это язык, который описывает шаблоны строк, основанные на метасимволах. Метасимвол – это символ в регулярном выражении, который описывает некоторый класс символов строки, указывает на положение подстроки, указывает количество повторений или группирует символы в подстроку. Например, метасимвол \d описывает цифры, а $ обозначает конец строки. В регулярном выражении могут присутствовать и обычные символы, которые описывают самих себя. Набор и значение метасимволов в регулярных выражениях описывает стандарт PCRE, большинство возможностей которого поддерживается в JS.

Область применения регулярных выражений

Регулярные выражения используются, как правило, для следующих задач:

  • Сопоставление . Целью этой задачи будет выяснить, соответствует ли определённый текст заданному регулярному выражению.
  • Поиск . С помощью регулярных выражений удобно находить соответствующие им подстроки и извлекать их из текста.
  • Замена . Регулярные выражения часто помогают не только найти, но и заменить в тексте подстроку, соответствующую регулярному выражению.

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

  • Проверить правильность заполнения пользовательских данных в форме.
  • Найти во вводимом пользователем тексте ссылку на изображение, для последующего его автоматического прикрепления к сообщению.
  • Убрать из текста html-теги.
  • Проверять код до компиляции на наличие простых синтаксических ошибок.
Особенности регулярных выражений в JS. Литералы регулярных выражений

Главной особенностью регулярных выражений в JS является то, что для них существует отдельный вид литералов. Так же как строковые литералы обрамляются кавычками, литералы регулярных выражений обрамляются слешами (/). Таким образом JS-код может содержать выражения вида:

console.log(typeof /tcoder/); // object

В самом деле регулярное выражение, которое определяется в строке

var pattern = new RegExp("tcoder");

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

Символы в регулярных выражениях

Все алфавитно-цифровые символы в регулярных выражениях не являются метасимволами и описывают самих себя. Это значит, что регулярному выражению /tcoder/ будет соответствовать подстрока tcoder. В регулярных выражениях так же можно указывать не алфавитные символы, такие как: перевод строки (\n), табуляция (\t) и так далее. Все эти символы так же соответствуют сами себе. Поставленный перед алфавитным символом обратный слеш (\) сделает его метасимволом, если такой имеется. Например, алфавитный символ «d» станет метасимволом, описывающим цифры, если его предварить слешем (\d).

Классы символов

Одиночные символы в регулярных выражениях можно группировать в классы при помощи квадратных скобок. Созданному таким образом классу соответствует любой из включённых в него символов. Например, регулярному выражению // будут соответствовать буквы «t», «c», «o», «d», «e», «r».

В классах также можно задавать диапазон символов при помощи дефиса. Например, классу соответствует класс . Заметим, что некоторые метасимволы в регулярных выражениях уже описывают классы символов. Например, метасимвол \d эквивалентен классу . Заметим, что метасимволы, описывающие классы символов, также могут включаться в классы. Например, классу [\da-f] соответствуют цифры и буквы «a», «b», «d», «e», «f», то есть любой шестнадцатеричный символ.

Существует, также, возможность описать класс символов, указав символы, которые не должны в него входить. Делается это при помощи метасимвола ^. Например, классу [^\d] будет соответствовать любой символ кроме цифры.

Повторения

Теперь мы можем описать, скажем, десятичное число любой заданной длины, просто написав подряд столько метасимволов \d, сколько цифр в этом числе. Согласитесь, что такой подход не очень удобен. К тому же, мы не можем описать диапазон необходимого количества повторений. Например, мы не можем описать число из одной или двух цифр. К счастью, в регулярных выражениях существует возможность описывать диапазоны повторений при помощи метасимволов. Для этого после символа достаточно просто указать диапазон повторений в фигурных скобках. Например, регулярному выражению /tco{1, 3}der/ будут соответствовать строки «tcoder», «tcooder» и «tcooоder». Если опустить максимальное количество повторений, оставив запятую и минимальное количество повторений, то можно указать количество повторений больше заданного. Например, регулярному выражению /bo{2,}bs/ будут соответствовать строки «boobs», «booobs», «boooobs» и так далее с любым количеством букв «о» не меньше двух.

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

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

Жадные повторения

Приведённый выше синтаксис описывает максимальное количество повторений, то есть из всех возможных количеств повторений, количество которых лежит в указанном диапазоне — выбирается максимальное. Такие повторения называют жадными. Это значит, что регулярному выражению /\d+/ в строке yeah!!111 будет соответствовать подcтрока «111», а не «11» или «1», хотя метасимвол «+» описывает одно и более повторений.

Если вы хотите реализовать нежадное повторение, то есть выбирать минимальное возможное количество повторений из указанного диапазона, то просто поставьте символ «?» после диапазона повторений. Например, регулярному выражению /\d+?/ в строке «yeah!!111» будет соответствовать подстрока «1», а регулярному выражению /\d{2,}/ в той же строке будет соответствовать подстрока «11».

Стоит обратить внимание на важную особенность нежадного повторения. Рассмотрим регулярное выражение /bo{2,}?bs/ . В строке «i like big boooobs» ему будет соответствовать, как и при жадном повторении, подстрока boooobs, а не boobs, как можно было подумать. Дело в том, что регулярному выражению при одном сопоставлении не может соответствовать несколько подстрок, расположенных в разных местах строки. То есть, нашему регулярному выражению не могут соответствовать подстроки «boo» и «bs», склеенные в одну строку.

Альтернативы

В регулярных выражениях так же можно использовать альтернативы — описывать множество строк, которое соответствует либо одной, либо другой части регулярного выражения. Такие части и называются альтернативами и разделяются при помощи вертикальной черты. Например, регулярному выражению /two|twice|\2/ может соответствовать либо подстрока «two», либо подстрока «twice», либо подстрока «2». Цепочка альтернатив обрабатывается слева на право до первого совпадения и ей может соответствовать только подстрока, которую описывает только одна альтернатива. Например, регулярному выражению /java|script/ в строке «I like javascript» будет соответствовать только подстрока «java».

Группировки

Чтобы рассматривать несколько символов как единое целое при использовании диапазонов повторений, классов символов и всего прочего, достаточно просто взять их в круглые скобки. Например, регулярному выражению /true(coder)?/ будут соответствовать строки «truecoder» и «true».

Ссылки

Кроме того, что круглые скобки объединяют символы в регулярном выражении в единое целое, на соответствующею им подстроку можно ссылаться, просто указав после слеша номер левой скобки из пары обрамляющих его скобок. Скобки нумеруются с лева на право начиная с единицы. Например, в регулярном выражении /(one(two)(three))(four)/ \1 ссылается на one, \2 на «two», \3 на «three», \4 на «four». В качестве примера использования таких ссылок приведём регулярное выражение /(\d)\1/ , которому соответствуют двухзначные числа с одинаковыми цифрами. Важным ограничением использования обратных ссылок является невозможность их использования в классах, то есть, например, описать двухзначное число с различными цифрами регулярным выражением /(\d)[^\1]/ нельзя.

Незапоминающие скобки

Часто бывает необходимо просто сгруппировать символы, но нет необходимости создавать ссылку. В этом случае можно сразу после левой группирующей скобки можно написать?:. Например, в регулярном выражении /(one)(?:two)(three)/ \2 будет указывать на «three».

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

Указание позиции

В регулярных выражениях так же существуют метасимволы, которые указывают на некоторую позицию в строке. Чаще всех остальных используются символы ^, $ указывающие на начало и конец строки. Например, регулярному выражению /\..+$/ будут соответствовать расширения в названиях файлов, а регулярному выражению /^\d/ первая цифра в строке, если она есть.

Позитивная и негативная опережающие проверки

При помощи регулярных выражений так же можно описать подстроку, за которой следует или не следует подстрока, описанная другим шаблоном. Например, нам необходимо найти слово java только если за ним следует «script». Эту задачу можно решить при помощи регулярного выражения /java(?=script)/ . Если же нам нужно описать подстроку «java» за которой не следует script можно воспользоваться регулярным выражением /java(?!script)/ .

Соберём всё то, о чём мы говорили выше в одну табличку.

Символ Значение
a|b Соответствует либо а, либо и.
(…) Группирующие скобки. Так же на подстроку, соотвествующую шаблону в скобках можно ссылаться.
(?:…) Только группировка, без возможности ссылаться.
\n Ссылка на подстроку, соответствующею n-ому шаблону.
^ Начало входных данных или начало строки.
$ Конец входных данных или конец строки.
a(?=b) Соответствует подстроке, которую описывает шаблон a, только если за ней следует подстрока, описанная шаблоном b.
a(?!b) Соответствует подстроке, которую описывает шаблон a, только если за ней не следует подстрока, описанная шаблоном b.
Флаги

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

В JavaScript существуют всего три флага регулярных выражений:

i – при указании этого флага регистр не учитывается, то есть, например, регулярному выражению \javascript\i будут соответствовать строки «javascript», «JavaScript», «JAVASCRIPT», «jAvAScript» и т.д.

m – этот флаг включает многострочный поиск. Это значит, что если в тексте есть символы перевода строк и этот флаг поставлен, то символы ^ и $ кроме начала и конца всего текста будут соответствовать так же ещё началу и концу каждой строки в тексте. Например, регулярному выражению /line$/m соответствует подстрока «line», как в строке «first line», так и в строке «one\nsecond line\ntwo».

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

Флаги можно комбинировать между собой в произвольном порядке, то есть \tcoder\mig , \tcоder\gim , \tocder\gmi и т.д., это одно и тоже. Порядок флагов так же не имеет значения, если их передавать в строке в качестве второго аргумента конструктору объекта RegExp , то есть new RegExp(«tcoder», «im») и new RegExp(«tcoder», «im») так же одно и тоже.

З.Ы.

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

Класс RegExp в JavaScript представляет собой регулярные выражения – объект, описывающий символьный шаблон. Объекты RegExp , как правило, создаются с помощью специального синтаксиса литералов, представленного ниже, но так же могут быть созданы посредством конструктора RegExp().

Синтаксис // с помощью специального синтаксиса литералов var regex = /pattern /flags ; // с помощью конструктора var regex = new RegExp("pattern ", "flags "); var regex = new RegExp(/pattern /, "flags ");

Значения параметров:

Флаги регулярных выражений Флаг Описание
g Позволяет найти все совпадения, а не останавливаться после первого совпадения (global match flag ).
i Позволяет выполнить сопоставление без учета регистра (ignore case flag ).
m Сопоставление производится по нескольким строкам. Обработка начальных и конечных символов (^ и $) производится по нескольким строкам, то есть сопоставление происходит с началом или концом каждой строки (разделители \n или \r), а не только с началом, или концом всей строки (multiline flag ).
u Шаблон будет расценен как последовательность кодовых точек Юникода (unicode flag ).
y Сопоставление происходит по индексу на который указывает свойство lastIndex этого регулярного выражения, при этом сопоставление не производиться по более позднему, или раннему индексу (sticky flag ).
Наборы символов Метасимволы Символ Описание
. Позволяет найти один символ, кроме символа новой строки, или символа конца строки (\n, \r, \u2028 или \u2029).
\d Позволяет найти символ цифры в базовом латинском алфавите. Эквивалентин использованию набору символов .
\D Позволяет найти любой символ, который не является цифрой в базовом латинском алфавите. Эквивалентен набору символов [^0-9].
\s Позволяет найти одиночный пробельный символ. Под пробельным символом понимается пробел, табуляция, перевод страницы, перевод строки и другие пробельные символы Юникода. Эквивалентен набору символов [\f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​\u3000].
\S Позволяет найти одиночный символ, который не является пробельным. Под пробельным символом понимается пробел, табуляция, перевод страницы, перевод строки и другие пробельные символы Юникода. Эквивалентен набору символов [^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​\u3000].
[\b] Позволяет найти символ backspace (специальный символ \b, U+0008).
\0 Позволяет найти символ 0 (ноль).
\n Позволяет найти символ новой строки.
\f Позволяет найти символ перевода страницы.
\r Позволяет найти символ возврата каретки.
\t Позволяет найти символ горизонтальной табуляции.
\v Позволяет найти символ вертикальной табуляции.
\w Позволяет найти любой буквенно-цифровой символ базового латинского алфавита, включая подчеркивание. Эквивалентен набору символов .
\W Позволяет найти любой символ, который не является символом из базового латинского алфавита. Эквивалентен набору символов [^a-Za-z0-9_].
\cX Позволяет найти контрольный символ в строке. Где X - буква от A до Z. Например, /\cM/ обозначает символ Ctrl-M.
\xhh Позволяет найти символ, используя шестнадцатеричное значение (hh - двухзначное шестнадцатеричное значение).
\uhhhh Позволяет найти символ, используя кодировку UTF-16 (hhhh - четырехзначное шестнадцатеричное значение).
\u{hhhh} или
\u{hhhhh}
Позволяет найти символ со значением Юникода U+hhhh или U+hhhhh (шестнадцатеричное значение). Только когда задан флаг u .
\ Указывает, что следующий символ является специальным и не должен интерпретироваться буквально. Для символов, которые обычно трактуются специальным образом, указывает, что следующий символ не является специальным и должен интерпретироваться буквально.
Ограничения Квантификаторы Символ Описание
n* Сопостовление происходит с любой строкой, содержащей ноль или более вхождений символа n .
n+ Сопостовление происходит с любой строкой, содержащей хотя бы один символ n .
n? Сопостовление происходит с любой строкой с предшествующим элементом n ноль или один раз.
n{x} Соответствует любой строке, содержащей последовательность символов n определенное количество раз x . X
n{x,} x вхождений предшествующего элемента n . X должно быть целым положительным числом.
n{x, y} Соответствует любой строке, содержащей по крайней мере x , но не более, чем с y вхождениями предшествующего элемента n . X и y должны быть целыми положительными числами.
n*?
n+?
n??
n{x}?
n{x,}?
n{x,y}?
Сопостовление происходит по аналогии с квантификаторами *, +, ? и {...}, однако при этом поиск идет минимально возможного сопоставления. По умолчанию используется "жадный" режим, ? в конце квантификатора позволяет задать "нежадный" режим при котором повторение сопоставления происходит минимально возможное количество раз.
x(?=y) Позволяет сопоставить x , только если за x следует y .
x(?!y) Позволяет сопоставить x , только если за x не следует y .
x|y Сопоставление происходит с любой из указанных альтернатив.
Группировка и обратные ссылки Символ Описание
(x) Позволяет найти символ x и запомнить результат сопоставления ("захватывающие скобки"). Сопоставленная подстрока может быть вызвана из элементов результирующего массива ..., [n], или из свойств предопределенного объекта RegExp $1 ..., $9.
(?:x) Позволяет найти символ x , но не запоминать результат сопоставления ("незахватывающие скобки"). Сопоставленная подстрока не может быть вызвана из элементов результирующего массива ..., [n], или из свойств предопределенного объекта RegExp $1 ..., $9.
\n Обратная ссылка на последнюю подстроку, совпадающую с n-ой по счёту в круглых скобках в регулярном выражении (нумерация скобок идет слева направо). n должно быть целым положительным числом.

Regex или регулярные выражения пугают новичков, но необходимы любому программисту. Давайте разберемся в регулярных выражениях на 5 простых примерах с JavaScript.

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

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

Совпадающие символы

Самые базовые регулярные выражения это те, что ищут совпадения по одному символу. Вот их правила:

1. Точка (.) соответствует любому символу. Если нужно искать именно точку, ее необходимо экранировать с помощью символа «\» (\.).

2. Знак вопроса (?) означает, что предыдущий символ является необязательным. Чтобы искать сам знак вопроса в строке, его также необходимо экранировать с помощью «\» (\?).

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit lest. Donec convallis dignissim ligula, et rutrum est elat vistibulum eu."; // Подойдут оба и "elit", и "elat". Точка означает, что подойдет любой символ. var regex = /el.t/g; console.log(text.match(regex)); // "est" и "lest" одинаково подойдут. Знак вопроса делает "l" необязательной. var regex2 = /l?est/g; console.log(text.match(regex2));

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit lest. Donec convallis dignissim ligula, et rutrum est elat vistibulum eu." ;

// Подойдут оба и "elit", и "elat". Точка означает, что подойдет любой символ.

var regex = /el.t/g ;

console . log (text . match (regex ) ) ;

// "est" и "lest" одинаково подойдут. Знак вопроса делает "l" необязательной.

var regex2 = /l?est/g ;

console . log (text . match (regex2 ) ) ;

Совпадение множества символов

Множество – это один или несколько символов, заключенных в скобки, например . Такое выражение будет искать в строке только этот набор символов – в данном примере только a, b или c. Можно наоборот, искать вхождения любых символов, кроме с помощью символа «^». [^ abc] будет соответствовать любому символу, который не является a, b или c. Также можно указать диапазон символов или чисел, например , .

Существуют встроенные наборы символов, упрощающие запись регулярных выражений. Их называют сокращениями или shorthand. К примеру, вместо можно написать \D. Есть сокращения и для остальных символов (включая цифры и знак подчеркивания) – \w и \W, а также для пробелов – \s и \S.

// Подойдут только "cat" и "can", но не "car". var text = "cat car can"; console.log(text.match(/ca/g)); // Пройдет все, кроме cat и can (присутствует символ ^) console.log(text.match(/ca[^tn]/g)); // Еще один пример, где пройдут только цифры text = "I would like 8 cups of coffee, please."; console.log("How many cups: " + text.match(//g)); // Более простой способ с помощью сокращения \d console.log("How many cups: " + text.match(/\d/g)); // Пройдет все, кроме цифр console.log(text.match(/\D/g));

// Подойдут только "cat" и "can", но не "car".

var text = "cat car can" ;

console . log (text . match (/ca/g ) ) ;

// Пройдет все, кроме cat и can (присутствует символ ^)

console . log (text . match (/ca[^tn]/g ) ) ;

// Еще один пример, где пройдут только цифры

text = "I would like 8 cups of coffee, please." ;

console . log ("How many cups: " + text . match (//g ) ) ;

// Более простой способ с помощью сокращения \d

console . log ("How many cups: " + text . match (/\d/g ) ) ;

// Пройдет все, кроме цифр

console . log (text . match (/\D/g ) ) ;

Совпадающие слова

В большинстве случаев вам нужно искать целые слова, а не отдельные символы. Это делается с помощью модификаторов (+) и (—), которые повторяют символ или набор символов.

Добавление {X} задает точное количество повторений, {x, y} – диапазон (x и y — числа).

Кроме того, есть специальный шаблон \b, который соответствует границам на концах слов.

var text = "Hello people of 1974. I come from the future. In 2014 we have laser guns, hover boards and live on the moon!"; // Найдет годы. \d+ найдет один и более знаков var yearRegex = /\d+/g; console.log("Years: ", text.match(yearRegex)); // Найдет все предложения. Наши предложения начинаются с заглавной буквы, а кончаются точкой или восклицательным знаком. var sentenceRegex = /.+?(\.|!)/g; console.log("Sentences: ", text.match(sentenceRegex)); // Найдет все слова, начинающиеся на "h". Нам подойдут и заглавные и строчные, так что используем модификатор i // \b для определения границы слов. var hWords = /\bh\w+/ig; console.log("H Words: ", text.match(hWords)); // Найдет все слова от 4 до 6 символов var findWords = /\b\w{4,6}\b/g; console.log("Words between 4 and 6 chars: ", text.match(findWords)); // Найдет слова длиннее 5 символов console.log("Words 5 chars or longer: ", text.match(/\b\w{5,}\b/g)); // Найдет слова точно 6 символов длиной console.log("Words exactly 6 chars long: ", text.match(/\b\w{6}\b/g));

var text = "Hello people of 1974. I come from the future. In 2014 we have laser guns, hover boards and live on the moon!" ;

// Найдет годы. \d+ найдет один и более знаков

var yearRegex = /\d+/g ;

console . log ("Years: " , text . match (yearRegex ) ) ;

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

var sentenceRegex = /.+?(\.|!)/g ;

console . log ("Sentences: " , text . match (sentenceRegex ) ) ;

// Найдет все слова, начинающиеся на "h". Нам подойдут и заглавные и строчные, так что используем модификатор i

// \b для определения границы слов.

var hWords = /\bh\w+/i g ;

console . log ("H Words: " , text . match (hWords ) ) ;

// Найдет все слова от 4 до 6 символов

var findWords = /\b\w{4,6}\b/g ;

console . log ("Words between 4 and 6 chars: " , text . match (findWords ) ) ;

// Найдет слова длиннее 5 символов

console . log ("Words 5 chars or longer: " , text . match (/\b\w{5,}\b/g ) ) ;

// Найдет слова точно 6 символов длиной

console . log ("Words exactly 6 chars long: " , text . match (/\b\w{6}\b/g ) ) ;

Валидация целых строк

В JavaScript такие выражения можно использовать для проверки пользовательского ввода из текстовых полей. Для валидации строк используется обычное регулярное выражение, привязанное к началу и концу фрагмента текста, использующее для этого выражения ^ (начало строки) и $ (конец строки). Эти символы гарантируют, что шаблон, который вы пишете, охватывает всю длину текста, а не только соответствует его части.

Кроме того, в этом случае мы используем метод test() объекта regex, который возвращает true или false, при проверке соответствия регулярного выражения строке.

// У нас имеется массив строк, давайте найдем ссылки..com/", "123461", "https://сайт/?s=google", "http://not a valid url", "abc http://invalid.url/" ]; var regex = /^https?:\/\/[\w\/?.&-=]+$/; var urls = ; for(var i = 0; i < strings.length; i++){ if(regex.test(strings[i])){ // Валидная ссылка urls.push(strings[i]); } } console.log("Valid URLs: ", urls);

// У нас имеется массив строк, давайте найдем ссылки.

var strings = [

"https://сайт/" ,

"this is not a URL" ,

"https://google.com/" ,

"123461" ,

"https://сайт/?s=google" ,

"http://not a valid url" ,

"abc http://invalid.url/"

var regex = / ^ https ? : \ / \ / [ \ w \ / ? . & -= ] + $ / ;

var urls = ;

for (var i = 0 ; i < strings . length ; i ++ ) {

if (regex . test (strings [ i ] ) ) {

urls . push (strings [ i ] ) ;

console . log ("Valid URLs: " , urls ) ;

Поиск и замена

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

JavaScript regexp – это тип объекта, который используется для сопоставления последовательности символов в строках.

Создаем первое регулярное выражение

Существует два способа создания регулярного выражения: с использованием литерала регулярного выражения или с помощью конструктора регулярных выражений. Каждый из них представляет один и тот же шаблон: символ «c », за которым следует «a », а затем символ «t ».

// литерал регулярного выражения заключается в слэши (/)
var option1 = /cat/;
// Конструктор регулярнго выражения
var option2 = new RegExp("cat");

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

Метод RegExp.prototype.test()

Помните, я говорил, что регулярные выражения являются объектами? Это означает, что у них есть ряд методов. Самый простой метод – это JavaScript regexp test , который возвращает логическое значение:

True (истина ): строка содержит шаблон регулярного выражения.

False (ложь ): совпадения не найдено.

console.log(/cat/.test(“the cat says meow”));
// верно
console.log(/cat/.test(“the dog says bark”));
// неверно

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

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

Символы
  • . – (точка ) соответствует любому одиночному символу за исключением переноса строки;
  • *  –  соответствует предыдущему выражению, которое повторяется 0 или более раз;
  • +  –  соответствует предыдущему выражению, которое повторяется 1 или более раз;
  • ? –  предыдущее выражение является необязательным (соответствует 0 или 1 раз );
  • ^ – соответствует началу строки;
  • $ – соответствует концу строки.
Группы символов
  • d –  соответствует любому одиночному цифровому символу.
  • w –  соответствует любому символу (цифре, букве или знаку подчёркивания).
  • [XYZ ]   –  набор символов. Соответствует любому одиночному символу из набора, заданного в скобках. Также можно задавать и диапазоны символов, например, .
  • [XYZ ]+   –  соответствует символу из набора, повторяемого один или более раз.
  • [^A —Z ]   –  внутри набора символов «^ » используется как знак отрицания. В данном примере шаблону соответствует всё, что не является буквами в верхнем регистре.

Флаги :

В JavaScript regexp существует пять необязательных флагов. Они могут использоваться отдельно или вместе, и размещаются после закрывающего слеша. Например: /[A —Z ]/g . Здесь я приведу только два флага.

g –  глобальный поиск.

i   –  поиск, нечувствительный к регистру.

Дополнительные конструкции

(x )   –   захватывающие скобки. Это выражение соответствует x и запоминает это соответствие, поэтому им можно воспользоваться позже.

(?:x )   –  незахватывающие скобки. Выражение соответствует x , но не запоминает это соответствие.

Соответствует x , только если за ним следует y .

Протестируем изученный материал

Сначала протестируем все выше сказанное. Допустим, что мы хотим проверить строку на наличие любых цифр. Для этого можно использовать конструкцию «d ».

console.log(/d/.test("12-34"));
// верно

Приведенный выше код возвращает значение true , если в строке есть хотя бы одна цифра. Что делать, если нужно проверить строку на соответствие формату? Можно использовать несколько символов «d », чтобы определить формат:

console.log(/dd-dd/.test("12-34"));
//верно
console.log(/dd-dd/.test("1234"));
//неверно

Если неважно, как в JavaScript regexp online идут цифры до и после знака «— », можно использовать символ «+ », чтобы показать, что шаблон «d » встречается один или несколько раз:

console.log(/d+-d+/.test("12-34"));
// верно
console.log(/d+-d+/.test("1-234"));
// верно
console.log(/d+-d+/.test("-34"));
// неверно

Для простоты можно использовать скобки, чтобы сгруппировать выражения. Допустим, у нас есть мяуканье кошки, и мы хотим проверить соответствие шаблону «meow » (мяу ):

console.log(/me+(ow)+w/.test("meeeeowowoww"));
// верно

Теперь давайте разберемся.

m => соответствие одной букве ‘m ‘;

e + => соответствие букве «e» один или несколько раз;

(ow) + => соответствие буквам «ow» один или несколько раз;

w => соответствие букве ‘w ’;

‘m’ + ‘eeee’ + ‘owowow’ + ‘w’ .

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

Оператор «? ». Он указывает, что предыдущий символ является необязательным. Как вы увидите ниже, оба тестовых примера возвращают значение true , потому что символы «s » помечены как необязательные.

console.log(/cats? says?/i.test("the Cat says meow"));
//верно
console.log(/cats? says?/i.test("the Cats say meow"));
//верно

Если вы захотите найти символ слеша, нужно экранизировать его с помощью обратного слеша. То же самое верно для других символов, которые имеют особое значение, например, вопросительного знака. Вот JavaScript regexp пример того, как их искать:

var slashSearch = ///;
var questionSearch = /?/;

  • d – это то же самое, что и : каждая конструкция соответствует цифровому символу.
  • w – это то же самое, что [A —Za —z 0-9_] : оба выражения соответствуют любому одиночному алфавитно-цифровому символу или подчеркиванию.
Пример: добавляем пробелы в строки, написанные в «верблюжьем » стиле

В этом примере мы очень устали от «верблюжьего » стиля написания и нам нужен способ добавить пробелы между словами. Вот пример:

removeCc("camelCase") // => должен вернуть "camel Case"

Существует простое решение с использованием регулярного выражения. Во-первых, нам нужно найти все заглавные буквы. Это можно сделать с помощью поиска набора символов и глобального модификатора.

Это соответствует символу «C » в «camelCase »

Теперь, как добавить пробел перед «C »?

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

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

Выше мы используем $1 для доступа к захваченному значению. Кстати, если бы у нас было два набора захватывающих скобок, мы использовали бы $1 и $2 для ссылки на захваченные значения и аналогично для большего количества захватывающих скобок.

Если вам нужно использовать скобки, но не нужно фиксировать это значение, можно использовать незахватывающие скобки: (?: x ). В этом случае находится соответствие x , но оно не запоминается.

Вернемся к текущей задаче. Как мы реализуем захватывающие скобки? С помощью метода JavaScript regexp replace ! В качестве второго аргумента мы передаем «$1 ». Здесь важно использовать кавычки.

function removeCc(str){
return str.replace(/()/g, "$1");
}


Снова посмотрим на код. Мы захватываем прописную букву, а затем заменяем ее той же самой буквой. Внутри кавычек вставим пробел, за которым следует переменная $1 . В итоге получаем пробел после каждой заглавной буквы.

function removeCc(str){
return str.replace(/()/g, " $1");
}
removeCc("camelCase") // "camel Case"
removeCc("helloWorldItIsMe") // "hello World It Is Me"

Пример: удаляем заглавные буквы

Теперь у нас есть строка с кучей ненужных прописных букв. Вы догадались, как их удалить? Во-первых, нам нужно выбрать все заглавные буквы. Затем используем поиск набора символов с помощью глобального модификатора:

Мы снова будем использовать метод replace , но как в этот раз сделать строчной символ?

function lowerCase(str){
return str.replace(//g, ???);
}


Подсказка : в методе replace () в качестве второго параметра можно указать функцию.

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

function lowerCase(str){
return str.replace(//g, (u) => u.toLowerCase());
}
lowerCase("camel Case") // "camel case"
lowerCase("hello World It Is Me") // "hello world it is me"

Пример: преобразуем первую букву в заглавную

capitalize("camel case") // => должен вернуть "Camel case"

Еще раз воспользуемся функцией в методе replace(). Однако на этот раз нам нужно искать только первый символ в строке. Напомним, что для этого используется символ «^ ».

Давайте на секунду задержимся на символе «^ ». Вспомните пример, приведенный ранее:

console.log(/cat/.test("the cat says meow"));
//верно

При добавлении символа «^ » функция больше не возвращает значение true , поскольку слово «cat » находится не в начале строки.



Просмотров