5 практических примеров использования регулярных выражений на JavaScript

1
27332
Добавить в избранное

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры:

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

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

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

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

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

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

Дополнительные ресурсы и дальнейшее чтение

Описанные в этой статье примеры помогут в решении 80% проблем, связанных с регулярными выражениями. Для остальных 20% загляните на следующие ресурсы:

RegexOne — интерактивное учебное пособие по регулярным выражениям.
Mozila’s JavaScript Regex
Regexr — инструмент для визуальной отладки и тестирования регулярных выражений в браузере.
regular-expressions.info — масса информации и технических деталей о регулярных выражениях.

Другие статьи по теме

11 материалов по регулярным выражениям

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

Интересуетесь веб-разработкой?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий