webdonsk.ruКак сделать регулярное выражение javascript
Добавил пользователь Алексей Ф. Обновлено: 10.09.2024
Регулярное выражение - это последовательность символов, образующая шаблон поиска.
Шаблон поиска можно использовать для текстового поиска и операций замены текста.
Что такое регулярное выражение?
Регулярное выражение - это последовательность символов, образующая шаблон поиска.
Когда вы ищете данные в тексте, вы можете использовать этот шаблон поиска, чтобы описать то, что вы ищете.
Регулярное выражение может быть отдельным символом или более сложным шаблоном.
Регулярные выражения можно использовать для выполнения всех типов операций текстового поиска и замены текста.
Синтаксис
Пример
/w3schools/i - это регулярное выражение.
w3schools - это шаблон (для использования в поиске).
i - является модификатором (изменяет поиск без учета регистра).
Использование строковых методов
В JavaScript регулярные выражения часто используются с двумя строковыми методами: search() и replace() .
Метод search() использует выражение для поиска совпадения и возвращает позицию совпадения.
Метод replace() возвращает измененную строку, в которой заменен шаблон.
Использование String search() со строкой
Метод search() ищет строку для указанного значения и возвращает позицию совпадения:
Пример
Используйте строку, чтобы выполнить поиск по запросу "W3schools" в строке:
Результат в n будет:
Использование String search() с регулярным выражением
Пример
Используйте регулярное выражение для поиска по запросу "w3schools" без учета регистра в строке:
Результат n будет:
Использование String replace() со строкой
Метод replace() заменяет указанное значение другим значением в строке:
Используйте String replace() с регулярным выражением
Пример
Используйте регулярное выражение без учета регистра, чтобы заменить Microsoft на W3Schools в строке:
Результат в res будет:
Вы заметили?
Аргументы регулярного выражения (вместо строковых аргументов) можно использовать в приведенных выше методах.
Регулярные выражения могут сделать ваш поиск намного более мощным (например, без учета регистра).
Модификаторы регулярных выражений
Модификаторы можно использовать для более глобального поиска без учета регистра:
Шаблоны регулярных выражений
Скобки используются для поиска ряда символов:
Метасимволы - это символы со специальным значением:
Квантификаторы определяют количества:
Использование объекта RegExp
В JavaScript объект RegExp - это объект регулярного выражения с предопределенными свойствами и методами.
Использование test()
Метод test() - это метод выражения RegExp.
Он ищет в строке шаблон и возвращает true или false, в зависимости от результата.
В следующем примере выполняется поиск в строке символа "e":
Пример
Поскольку в строке есть буква "e", вывод приведенного выше кода будет:
Вам не нужно сначала помещать регулярное выражение в переменную. Две приведенные выше строки можно сократить до одной:
Использование exec()
Метод exec() - это метод выражения RegExp.
Он ищет строку для указанного шаблона и возвращает найденный текст как объект.
JS regexp – это тип объекта, который используется для сопоставления последовательности символов в строках.
Создаем собственные регулярные выражения JavaScript
Как правило, если регулярное выражение остается константой, то есть не будет меняться, лучше использовать литерал регулярного выражения. Если оно будет меняться или зависит от других переменных, лучше использовать метод с конструктором.
Метод RegExp.prototype.test()
Помните, я говорил, что регулярные выражения являются объектами? Это означает, что у них есть ряд методов. Самый простой метод – это JavaScript regexp test , который возвращает логическое значение:
True ( истина ): строка содержит шаблон регулярного выражения.
False ( ложь ): совпадения не найдено.
Памятка по основам регулярных выражений
Секрет регулярных выражений заключается в запоминании типовых символов и групп. Я настоятельно рекомендую потратить несколько часов на таблицу, приведенную ниже, а затем вернуться, и продолжить изучение.
Символы
- . – ( точка ) соответствует любому одиночному символу за исключением переноса строки;
- * – соответствует предыдущему выражению, которое повторяется 0 или более раз;
- + – соответствует предыдущему выражению, которое повторяется 1 или более раз;
- ? – предыдущее выражение является необязательным ( соответствует 0 или 1 раз );
- ^ – соответствует началу строки;
- $ – соответствует концу строки.
Группы символов
В JavaScript regexp существует пять необязательных флагов. Они могут использоваться отдельно или вместе, и размещаются после закрывающего слеша. Например: /[ A — Z ]/ g . Здесь я приведу только два флага.
g – глобальный поиск.
i – поиск, нечувствительный к регистру.
Дополнительные конструкции
( x ) – захватывающие скобки. Это выражение соответствует x и запоминает это соответствие, поэтому им можно воспользоваться позже.
(?: x ) – незахватывающие скобки. Выражение соответствует x , но не запоминает это соответствие.
Соответствует x , только если за ним следует y .
Протестируем изученный материал
Теперь давайте разберемся.
m => соответствие одной букве ‘ m ‘;
w => соответствие букве ‘ w ’;
‘m’ + ‘eeee’ + ‘owowow’ + ‘w’ .
Советы и подсказки
Если вы захотите найти символ слеша, нужно экранизировать его с помощью обратного слеша. То же самое верно для других символов, которые имеют особое значение, например, вопросительного знака. Вот JavaScript regexp пример того, как их искать:
- d – это то же самое, что и 4 : каждая конструкция соответствует цифровому символу.
- w – это то же самое, что [ A — Za — z 0-9_] : оба выражения соответствуют любому одиночному алфавитно-цифровому символу или подчеркиванию.
Существует простое решение с использованием регулярного выражения. Во-первых, нам нужно найти все заглавные буквы. Это можно сделать с помощью поиска набора символов и глобального модификатора.
Нам нужно использовать захватывающие скобки! Они позволяют найти соответствие и запомнить его, чтобы использовать позже! Используйте захватывающие скобки, чтобы запомнить найденную заглавную букву:
Получить доступ к захваченному значению позднее можно так:
Выше мы используем $1 для доступа к захваченному значению. Кстати, если бы у нас было два набора захватывающих скобок, мы использовали бы $1 и $2 для ссылки на захваченные значения и аналогично для большего количества захватывающих скобок.
Если вам нужно использовать скобки, но не нужно фиксировать это значение, можно использовать незахватывающие скобки: (?: x ). В этом случае находится соответствие x , но оно не запоминается.
Снова посмотрим на код. Мы захватываем прописную букву, а затем заменяем ее той же самой буквой. Внутри кавычек вставим пробел, за которым следует переменная $1 . В итоге получаем пробел после каждой заглавной буквы.
Пример : удаляем заглавные буквы
Теперь у нас есть строка с кучей ненужных прописных букв. Вы догадались, как их удалить? Во-первых, нам нужно выбрать все заглавные буквы. Затем используем поиск набора символов с помощью глобального модификатора:
Мы снова будем использовать метод replace , но как в этот раз сделать строчной символ?
Подсказка : в методе replace () в качестве второго параметра можно указать функцию.
Мы будем использовать стрелочную функцию, чтобы не захватывать значение найденного совпадения. При использовании функции в методе JavaScript regexp replace эта функция будет вызвана после поиска совпадений, и результат функции используется в качестве замещающей строки. Еще лучше, если совпадение является глобальным и найдено несколько совпадений — функция будет вызвана для каждого найденного совпадения.
Пример: преобразуем первую букву в заглавную
Обратите внимание, что мы больше не используем глобальный модификатор, так как нам нужно только одно совпадение. Теперь можно вставить регулярное выражение в метод replace и добавить стрелочную функцию в качестве второго аргумента:
Продолжаем изучение
На этом наш урок заканчивается, но не заканчивается ваше обучение. Вот несколько идей для проектов:
Поделитесь своими JavaScript regexp примерами и решениями в комментариях! И не забывайте, что это всего лишь основы регулярных выражений, с ними можно делать гораздо больше!
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, подписки, лайки, отклики, дизлайки низкий вам поклон!
Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!
Регулярное выражение это последовательность символов, которые формируют шаблон поиска.
Когда вам нужно что-то найти в каком-то тексте, то для описания того, что вы ищите, и используется шаблон поиска.
В качестве регулярного выражения может использоваться как один символ, так и более сложный шаблон.
Регулярные выражения могут использоваться для выполнения всех видов операций текстового поиска и замены.
- /msiter/i — регулярное выражение.
- msiter – шаблон, используемый в операции поиска.
- i — модификатор (определяет, что поиск должен быть регистронезависимым).
Использование методов строки
В JavaScript регулярные выражения часто используют в двух методах строки: search() и replace().
Метод search() использует выражение для поиска совпадения и возвращает позицию найденного совпадения.
Метод replace() возвращает измененную строку, где произведена замена шаблона.
Метод search() с регулярным выражением
В следующем примере для регистронезависимого поиска используется регулярное выражение:
В результате в переменную n будет возвращено 14.
Метод search() со строкой
Метод search() в качестве параметра также может принимать строку. При этом строковый параметр преобразуется в регулярное выражение:
В следующем примере для поиска используется строка "MSiter":
Метод replace() с регулярным выражением
В следующем примере, чтобы заменить подстроку "Microsoft" на "Msiter" без учета регистра, используется регулярное выражение:
В результате в переменной res будет строка "Посетите сайт MSiter!".
Метод replace() со строкой
Метод replace() в качестве параметра также может принимать строку:
А вы заметили, что
- В описанных методах в качестве параметров можно использовать регулярные выражения (вместо строки).
- Регулярные выражения предоставляют значительно больший контроль над процессом поиска (например, можно производить поиск без учета регистра букв).
Модификаторы регулярного выражения
Модификаторы позволяют расширить область поиска:
| Модификатор | Описание |
|---|---|
| i | Поиск без учета регистра букв |
| g | Глобальный поиск (поиск всех совпадений, а не останавливаться после первого найденного) |
| m | Многострочный поиск |
Шаблоны регулярных выражений
Квадратные скобки используются для поиска в диапазоне символов:
| Выражение | Описание |
|---|---|
| [abc] | Найти любой из символов в квадратных скобках |
| 7 | Найти любую из цифр в квадратных скобках |
| (x|y) | Поиск альтернативы — один ИЛИ (|) другой вариант |
Метасимволы — это символы со специальным значением:
| Метасимвол | Описание |
|---|---|
| \d | Найти число |
| \s | Найти пробельный символ |
| \b | Найти совпадение в начале или в конце слова |
| \uxxxx | Найти символ в кодировке Юникод, заданный шестнадцатеричным числом xxxx |
Квантификаторы определяют количество повторений:
| Квантификатор | Описание |
|---|---|
| n+ | Искать один или более символ n |
| n* | Искать ноль или более символов n |
| n? | Искать ноль или один символ n |
Объект RegExp
В JavaScript объект RegExp — это объект регулярного выражения с предопределенными свойствами и методами.
Метод test()
Метод test() объекта RegExp используется для поиска шаблона в заданной строке. В зависимости от результата он возвращает true или false.
В следующем примере в строке ищется символ "e":
Так как в этом примере строка содержит символ "e", результат будет true.
Для работы с объектом RegExp не обязательно сначала помещать регулярное выражение в переменную. Две строчки кода предыдущего примера можно сократить до одной:
Метод exec()
Метод exec() объекта RegExp используется для поиска шаблона в заданной строке. Он возвращает найденный текст. Если ничего не было найдено, то возвращается null.
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
- Урок №
Учебник
по регулярным выражениям - Урок №
Работа с регулярными
выражениями. Глава 1. - Урок №
Работа с регулярными
выражениями. Глава 2. - Урок №
Работа с регулярными
выражениями. Глава 3. - Урок №
Работа с регулярными
выражениям. Глава 4. - Урок №
Отличия
от PHP версии
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
- Урок №
новая вкладка с new.code.mu
Доступные события - Урок №
новая вкладка с new.code.mu
Перемещение элемента по окну - Урок №
новая вкладка с new.code.mu
Перемещение на другой элемент - Урок №
новая вкладка с new.code.mu
Объект event.dataTransfer - Урок №
новая вкладка с new.code.mu
Картинка при перетягивании - Урок №
новая вкладка с new.code.mu
Вид курсора
- Урок №
Введение
в ООП в стиле ES6 - Урок №
Основы
работы с ООП - Урок №
Наследование
классов в JavaScript
Продвинутая работа
с классами на JavaScript --> - Урок №
Применение
ООП при работе с DOM - Урок №
Практика
по ООП в JavaScript - Тут скоро будут еще уроки
по функциональному и прототипному
стилю ООП.
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
- Урок №
новая вкладка с new.code.mu
Функции resolve reject - Урок №
новая вкладка с new.code.mu
Метод catch - Урок №
новая вкладка с new.code.mu
Цепочки промисов - Урок №
новая вкладка с new.code.mu
Перехват ошибок - Урок №
новая вкладка с new.code.mu
Promise.all - Урок №
новая вкладка с new.code.mu
Promise.race - Урок №
новая вкладка с new.code.mu
async await - Урок №
новая вкладка с new.code.mu
Загрузка картинок
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
- Урок №
Учебник
jQuery для новичков - Урок №
Основы
работы с jQuery - Урок №
Манипулирование
элементами страницы - Урок №
Работа
с набором элементов - Урок №
Работа
с событиями jQuery - Урок №
Эффекты и анимация
библиотеки jQuery - Урок №
Практика на отработку
библиотеки jQuery - Урок №
Работа с
библиотекой jQueryUI - Урок №
Популярные плагины
библиотеки jQuery
Существует несколько методов JavaScript для работы с регулярными выражениями. Мы начнем знакомится с ними на примере replace - вы уже знакомы с этим методом: он первым параметром принимает что менять, а вторым - на что менять. А сам метод применяется к строке, в которой производится замена.
Метод replace
Первым параметром этого метода можно передавать не просто строку, а регулярное выражение. Посмотрите разницу:
Обратите внимание на слеши /, в которых стоит буква 'a'. Эти слеши называются ограничителями регулярных выражений.
Ограничители нужны для того, чтобы после них писать модификаторы - команды, которые изменяют общие свойства регулярного выражения.
С одним модификатором - g - вы должны быть уже знакомы - мы немного касались его, когда проходили метод replace. Этот модификатор включает режим глобального поиска и замены - без него регулярка ищет только первое совпадение, а с ним - все совпадения. Посмотрите разницу:
Есть также модификатор i - он заставляет регулярки игнорировать регистр символов:
В регулярке можно указывать несколько модификаторов, их порядок значения не имеет.
Буквы, цифры, любой символ
В регулярных выражениях есть два типа символов: те, которые обозначают сами себя и символы-команды (специальные символы).
Буквы и цифры обозначают сами себя, а вот точка является специальным символом и обозначает 'любой символ'. Смотрите примеры:
Далее посмотрите примеры с использованием спецсимвола 'точка':
Так как точка - это любой символ, то под нашу регулярку попадут все подстроки по такому шаблону: буква 'x', затем любой символ, затем опять буква 'x'. Первые 4 подстроки попали под этот шаблон (это xax xsx x&x x-x) и заменились на '!', а последняя подстрока (xaax) не попадает, так как внутри (между буквами 'x') не один символ - а целых два.
Так как точка - это любой символ, а в нашей регулярке идут две точки подряд, то под нашу регулярку попадут все подстроки по такому шаблону: буква 'x', затем два любых символа, затем опять буква 'x'. Первая подстрока не попала под этот шаблон (так как у нее только 1 символ между буквами 'x'), а последняя подстрока (xabx) - попала.
Итак, запомните: буквы и цифры обозначают сами себя, а точка заменяет любой символ.
Операторы повторения символов (*,+,?)
Бывают ситуации, когда мы хотим указать, что символ повторяется заданное количество раз. Если мы знаем точное число повторений, то можно просто написать его несколько раз - ( / aaaa / ). Но что делать, если мы хотим сказать такое: 'повторить один или более раз'?
Для этого существуют операторы (квантификаторы) повторения: плюс '+' (один и более раз), звездочка '*' (ноль и более раз) и вопрос '?' (ноль или один раз, иначе говоря - может быть, а может не быть).
Данные операторы действуют на тот символ, который стоит перед ними.
В данном случае шаблон поиска выглядит так: буква 'x', буква 'a' один или более раз, буква 'x'.
В данном случае шаблон поиска выглядит так: буква 'x', буква 'a' ноль или более раз, буква 'x'. По-другому можно сказать так: буквы 'a' или нет, или повторяется один или более раз.
Кроме очевидного варианта xax xaax xaaax, под шаблон также попадает подстрока 'xx', так как там нет буквы 'a' вообще (то есть 0 раз).
А 'xbx' не попал, так как там нет буквы 'a', но есть буква 'b' (ее мы не разрешили).
В данном случае шаблон поиска выглядит так: буква 'x', далее буква 'a' может быть или не быть, потом буква 'x'.
Группирующие скобки
В предыдущих примерах операторы повторения действовали только на один символ, который стоял перед ними. Что делать, если мы хотим подействовать им на несколько символов?
Для этого существуют группирующие скобки '(' и ')':
В данном случае шаблон поиска выглядит так: буква 'x', далее строка 'ab' один или более раз, потом буква 'x'.
То есть: если что-то стоит в группирующих скобках и сразу после ')' стоит оператор повторения - он подействует на все, что стоит внутри скобок.
Экранировка спецсимволов
Предположим, что мы хотим сделать так, чтобы спецсимвол обозначал сам себя. Например, для того, чтобы найти по такому шаблону: буква 'a', затем плюс '+', затем буква 'x'. Следующий код будет работать не так, как хотелось бы:
Автор регулярки хотел, чтобы шаблон поиска выглядел так: буква 'a', затем плюс '+', затем буква 'x'.
А на самом деле он выглядит так: буква 'a' один или более раз, потом буква 'x'.
Поэтому подстрока 'a+x' и не попала под шаблон (мешает '+') - а все остальные попали.
Итак, правило: чтобы спецсимвол обозначал сам себя - его нужно экранировать с помощью обратного слеша. Вот так:
Вот теперь шаблон поиска выглядит так, как надо: буква 'a', затем плюс '+', затем буква 'x'.
В данном примере шаблон выглядит так: буква 'a', затем точка '.', затем буква 'x'. Сравните со следующим примером (забыт обратный слеш):
Все подстроки попали под шаблон, так как незаэкранированная точка обозначает любой символ.
Обратите внимание на то, что если вы забудете обратный слеш для точки (когда она должна обозначать сама себя) - этого можно даже не заметить:
Визуально работает правильно (так как точка обозначает любой символ, в том числе и обычную точку '.'). Но если поменять строку, в которой происходят замены - мы увидим нашу ошибку:
Список специальных символов и обычных
Если экранировать обычный символ - ничего страшного не случится - он все равно будет обозначать сам себя.
Исключение - цифры, они станут карманами, см. главу №3 по регулярным выражениям.
Часто возникает сомнение, является ли данный символ специальным. Некоторые доходят до того, что экранируют все подозрительные символы подряд. Однако, это плохая практика (захламляет регулярку обратными слешами).
Являются спецсимволами: $ ^ . * + ? \ <> [] () |
Ограничение жадности
Чтобы понять, о чем пойдет речь - посмотрите пример:
В данном примере шаблон поиска выглядит так: буква 'a', затем любой символ один или более раз, затем буква 'x'.
Однако, регулярка сработала не так, как ожидал автор - она захватила максимально возможное количество символов, то есть закончилась не на первом иксе 'x', а на последнем 'x'.
Такое поведение операторов (квантификаторов) повторения называется жадностью - они стремятся забрать как можно больше.
Такая особенность не всегда полезна и, к счастью, ее можно отменить, говоря по-другому - ограничить жадность.
Делается это с помощью добавления знака '?' к оператору повторения: вместо жадных '+' и '*' мы напишем '+?' и '*?' - они будут не такие жадные:
В данном примере шаблон поиска выглядит так: буква 'a', затем любой символ один или более раз (с ограничением жадности), затем буква 'x'.
С помощью '?' мы ограничили жадность плюсу - и теперь он ищет до первого совпадения.
Жадность можно ограничивать всем операторам повторения, в том числе и '?', и '<>' - вот так: '??' и '<>?'.
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите - переходите к изучению новой темы.
Учебник JavaScript
- Урок №
Учебник
JavaScript для новичков - Урок №
Основы
языка JavaScript - Урок №
Основы работы
с массивами и объектами - Урок №
Работа с конструкциями
if-else и switch-case - Урок №
Работа с циклами
for и while - Урок №
Работа
с математическими функциями - Урок №
Работа со строковыми
функциями в JavaScript - Урок №
Функции
работы с массивами - Урок №
Практика на комбинации
стандартных функций - Урок №
Основы работы
с пользовательскими функциями - Урок №
Приемы работы
с флагами - Урок №
Приемы работы
с логическими значениями - Урок №
Приемы работы
с циклами - Урок №
Приемы работы
с массивами - Урок №
Правильное использование
пользовательских функций - Урок №
Практика на
пользовательские функции - Урок №
Продвинутая работа
с пользовательскими функциями
Практика
Работа с DOM
- Урок №
Основы
работы с DOM - Урок №
Работа
с элементами HTML страницы - Урок №
Работа
с датами в JavaScript - Урок №
Работа
с таймерами в JavaScript - Урок №
Продвинутая
работа с событиями - Урок №
Продвинутая
работа с DOM - Урок №
Работа
с метриками - Урок №
Работа
с метриками для window - Урок №
Основы работы
с объектом Event - Урок №
Продвинутая работа
с объектом Event - Урок №
Разные
полезные темы - Урок №
новая вкладка с new.code.mu
Работа с узлами
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Читайте также: