Как составлять регулярные выражения
- 5 июня 2023
Регулярное выражение — это последовательность символов (селекторов). Оно используется для поиска и обработки строк, слов, чисел и других текстовых данных.
Регулярные выражения выручают при решении разных задач. Например, с их помощью легко искать и менять строки в коде. Но чаще всего регулярные выражения используют для валидации форм. Давайте посмотрим, как это делать.
Зачем нужны регулярные выражения
Шаблон регулярного выражения
Создать шаблон можно двумя способами. Выбирайте тот, что больше нравится:
Первый способ — через new RegExp()
:
regularExpression = new RegExp("регулярное выражение", "флаги");
Второй способ — через слеши:
regularExpression = /регулярное выражение/флаги;
Основные символы в регулярных выражениях
Посмотрим, чем наполнять шаблон регулярного выражения: какие селекторы использовать и что такое флаги.
Символы текста
Буквы и цифры — самые простые символы. Например, регулярное выражение оса
найдет совпадение даже в слове «автосалон».
Символы начала и конца строки
Каретка ^
используется для обозначения начала строки, а доллар $
— для конца. К примеру, если мы напишем ^оса$
, то совпадением будет только со словом «оса».
Классы символов
С их помощью указываются диапазоны символов. То есть вы можете уточнить, какие буквы, цифры или знаки могут встречаться в регулярном выражении, а какие нет.
[^]
— отрицание диапазона символов. Если коротко, вы можете исключить поиск конкретных символов. Например, [^оса]
не найдёт совпадений со словом «оса», а вот с «осадками» совпадение будет.
Цифры:
[0-9]
— любая цифра от нуля до девяти;\d
— тоже любая цифра, это эквивалент[0-9]
.
Буквы:
[а-яё]
— любая буква кириллицы в нижнем регистре;[а-яёА-ЯЁ]
— любая буква кириллицы в нижнем и верхнем регистре;[a-z]
— любая буква на латинице в нижнем регистре;[a-zA-Z]
— любая буква на латинице в нижнем и верхнем регистре;\w
— любая цифра, латинская буква или знак подчёркивания.
Символы и знаки препинания:
[.,:;?!-]
— знаки препинания.\s
— пробел.
Квантификаторы
Эти селекторы проверяют количество повторений предыдущего символа или группы символов:
{n}
— совпадение с точным количеством, гдеn
— это положительное целое число. Например, конструкция[1-3]{1}
будет искать одну цифру от одного до трёх.{min,max}
— диапазон совпадений от минимального до максимального. Например, так можно указать минимальное и максимальное количество символов для ввода —{2,15}
. А ещё одно из значений можно пропустить —{min,}
или{,max}
.— одно или бесконечное количество совпадений. Этот селектор равнозначен записи
`.+
— одно или более повторений. Этот селектор равнозначен записи{1,}
.?
— ни одного или одно повторение. Селектор равнозначен записи{0,1}
.
Модификаторы
Их ещё называют флагами. Это определённые параметры, которые задают настройки для поиска или замены текста.
Модификаторов много, мы перечислим лишь самые популярные:
i
— не учитывать регистр букв;g
— искать все совпадения;u
— поддержка юникод-символов.
Альтернация
Проще говоря, это условие. Альтернация обозначается символом |
и указывает несколько вариантов, которые могут соответствовать регулярному выражению. Например, регулярное выражение (яблоко|банан)
будет искать строки, содержащие либо слово «яблоко», либо «банан».
Символы группируются в скобках. При этом вы можете добавить условие «или» для любого количества символов: (a|b|c|d)
.
💡 Это лишь часть селекторов. Полный список вы найдёте на сайте MDN.
Как составить регулярное выражение
Сформулируйте условие. Например, вы хотите составить регулярное выражение для проверки логина. Этот логин должен быть длиннее трёх символов. Он может содержать буквы на кириллице и латинице или цифры. Регистр неважен.
Составьте выражение. Наполните шаблон селекторами, подходящими под ваши условия:
- Логин содержит буквы или цифры —
/^[a-zа-яё0-9]/
. - Слово должно быть не короче трёх символов, максимальной длины нет —
/^[a-zа-яё0-9]{3,}/
. - Регистр неважен —
/^[a-zа-яё0-9]{3``,}$/i
.
Протестируйте регулярное выражение. Напишите собственные тесты или воспользуйтесь одним из онлайн-сервисов, например, regex101.
Регулярные выражения можно составить разными способами — даже два разработчика-коллеги напишут для одной и той же задачи что-то своё. Кому-то важна лаконичность — чем выражение короче, тем лучше. Кто-то хочет предусмотреть все варианты — например, вдруг пользователь введёт в логине нижнее подчёркивание. А кто-то просто хорошо знает возможности регулярок и гибко использует этот инструмент.
Примеры регулярных выражений
Регулярное выражение для номера телефона
Допустим, мы хотим проверить, что пользователь ввёл телефон в формате (XXX) XXX-XXXX
. Можно составить следующее регулярное выражение: /^\d{3}-\d{3}-\d{4}$/
. Здесь \d
соответствует любой цифре, а фигурные скобки {
и }
указывают количество повторений.
Такое регулярное выражение будет соответствовать строкам, которые начинаются с открывающей скобки. За скобкой следуют три цифры, затем пробел, ещё три цифры, дефис и четыре цифры. Последним идёт символ конца строки.
✅ При проверке 123-456-7890
будет соответствовать шаблону, а (123) 456 7890
— нет.
Регулярное выражение для электронной почты
Составим регулярное выражение, которое проверяет формат почты username@domain.com
— /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w)$/
. Выражение сложное, поэтому давайте посимвольно разбирать, что здесь происходит:
^
— начало строки.\w
— любая буква, цифра или символ подчёркивания.+
— указывает, что предыдущий символ (любая буква, цифра или символ подчёркивания) должен повторяться один или более раз.([.-]?\w+)*
— группа символов. Она начинается с точки, дефиса или ни одного из них (?
). За ними следует одна или более буквы, цифры или символы подчёркивания (\w+
). Звёздочка указывает, что эта группа может встречаться нуль или более раз.@
— символ собаки, он обязателен в адресе электронной почты.\w
— любая буква, цифра или символ подчёркивания.([.-]?\w+)*
— аналогичная группа символов, как описано выше..
— просто точка.\w
— любые буквы, цифры или символ подчёркивания.$
— конец строки.
Если коротко, это регулярное выражение будет соответствовать строкам, которые начинаются с одной или более буквы, цифры или символа подчёркивания. За ними следует символ @
. Затем идёт одна или более группа символов — она состоит из букв, цифр или подчёркивания, разделённых точкой. В конце — буквы, цифры или знак подчёркивания.
✅ При проверке example.email@mail.com
будет соответствовать этому шаблону, а example.emailmail.com
— нет.
Регулярное выражение для проверки имени человека
Предположим, мы хотим проверить, что введённое имя содержит только буквы и начинается с заглавной буквы. Для этого можно составить такое выражение: /^[А-Я][а-яё]*$/
. Здесь [А-Я]
соответствует любой заглавной букве, а [а-яё]
— любой букве в нижнем регистре. Звёздочка указывает, что предыдущий символ может повторяться нуль или более раз.
✅ При проверке имя Иван
будет соответствовать шаблону, а иван
— нет.
Заключение
Мы затронули лишь небольшую часть — основы регулярных выражений. Тема регулярок слишком обширна, чтобы рассказать обо всём в одной статье. Есть другие селекторы, модификаторы, да и сами регулярные выражения могут быть сложнее и интереснее.
💡 Чтобы углубиться в тему, пройдите курс «Регулярные выражения для фронтенда». Он научит вас составлять регулярные выражения, чтобы писать меньше кода и работать быстрее.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Ошибка JavaScript «Uncaught TypeError: Cannot read property of undefined». Что делать?
Описание проблемы
Эта ошибка возникает, когда вы пытаетесь получить доступ к свойству объекта, который в данный момент имеет значение undefined
. Например:
let obj = undefined;
console.log(obj.property); // Uncaught TypeError: Cannot read property 'property' of undefined
Возможные причины
- Объект не был инициализирован. Возможно, переменная еще не была объявлена или ей не присвоено значение.
- Неправильный путь к данным. Вы пытаетесь обратиться к свойству объекта, но объект отсутствует в цепочке.
- Асинхронность. Данные могли еще не загрузиться или быть доступны в момент обращения.
- Опечатка в названии свойства. Вы могли неверно написать имя свойства объекта.
Шаги по исправлению
1. Проверка объекта перед доступом к свойствам
Убедитесь, что объект существует, прежде чем пытаться получить его свойства.
if (obj !== undefined && obj !== null) {
console.log(obj.property);
}
// Или современный способ:
console.log(obj?.property); // Вернет undefined, если obj равен null или undefined
2. Инициализация объекта перед использованием
Если переменная должна содержать объект, убедитесь, что он инициализирован.
Неверный код:
let data;
console.log(data.user.name); // Ошибка
Исправление:
let data = { user: { name: "Иван" } };
console.log(data.user.name); // "Иван"
3. Проверка API или данных с сервера
Если данные загружаются с сервера, добавьте проверку, что ответ корректен.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
if (data?.user?.name) {
console.log(data.user.name);
} else {
console.error('Данные пользователя отсутствуют');
}
});
4. Использование значений по умолчанию
Для предотвращения ошибок можно задавать значения по умолчанию.
let user = undefined;
let userName = user?.name || "Гость";
console.log(userName); // "Гость"
5. Отладка с помощью console.log
Проверяйте промежуточные значения переменных в консоли браузера.
console.log(obj); // Убедитесь, что объект определен
Пример из жизни
Вы пишете код для отображения имени пользователя из объекта user
:
let user = null; // Данные еще не загружены
console.log(user.name); // Uncaught TypeError: Cannot read property 'name' of null
Исправление:
let user = null;
console.log(user?.name || "Имя пользователя не найдено"); // "Имя пользователя не найдено"
Итог
Следуя этим рекомендациям, вы сможете избежать ошибок, связанных с доступом к свойствам undefined
или null
. Если ошибка продолжает появляться, убедитесь, что данные корректно загружаются, и используйте инструменты отладки.
- 15 ноября 2024
Как исправить ошибку JavaScript «Uncaught ReferenceError: variable is not defined»
Эта ошибка возникает, когда вы пытаетесь обратиться к переменной, которая не была объявлена в текущей области видимости. Например:
console.log(myVariable); // Uncaught ReferenceError: myVariable is not defined
Возможные причины
- Вы пытаетесь обратиться к переменной до ее объявления.
- Переменная объявлена внутри функции и недоступна за ее пределами.
- Ошибка в написании имени переменной (опечатка).
Шаги по исправлению
1. Проверка объявления переменной
Убедитесь, что переменная объявлена перед ее использованием.
Неверный код:
console.log(myVariable); // Ошибка
Исправление:
let myVariable = 10;
console.log(myVariable); // 10
2. Правильное определение области видимости переменной
Если переменная объявлена внутри функции, она недоступна за ее пределами.
Неверный код:
function myFunction() {
let localVariable = "Привет";
}
console.log(localVariable); // Ошибка
Исправление:
function myFunction() {
let localVariable = "Привет";
console.log(localVariable); // "Привет"
}
myFunction();
3. Использование глобальных переменных
Если переменная должна быть доступна везде, объявляйте ее глобально (но избегайте этого, если возможно).
let globalVariable = "Глобальная переменная";
function showVariable() {
console.log(globalVariable);
}
showVariable(); // "Глобальная переменная"
4. Проверка имени переменной на ошибки
Проверьте, нет ли опечаток в имени переменной.
Неверный код:
let myVariable = "Данные";
console.log(myVarible); // Ошибка
Исправление:
let myVariable = "Данные";
console.log(myVariable); // "Данные"
5. Использование typeof
для проверки существования переменной
Вы можете использовать оператор typeof
, чтобы проверить, объявлена ли переменная.
if (typeof myVariable !== "undefined") {
console.log(myVariable);
} else {
console.log("Переменная не определена");
}
Пример из жизни
Вы пишете функцию для проверки данных пользователя:
function checkUser() {
if (userName) {
console.log(`Добро пожаловать, ${userName}!`);
}
}
checkUser(); // Ошибка: userName не определен
Исправление:
let userName = "Иван";
function checkUser() {
if (userName) {
console.log(`Добро пожаловать, ${userName}!`);
}
}
checkUser(); // "Добро пожаловать, Иван!"
Итог
Эта ошибка часто возникает из-за опечаток или неверной области видимости. Убедитесь, что переменные объявлены и доступны в нужных местах. Если необходимо, используйте typeof
для проверки их существования.
- 15 ноября 2024
Как исправить ошибку JavaScript «Uncaught TypeError: Cannot set property of undefined»
Эта ошибка возникает, когда вы пытаетесь присвоить значение свойству объекта, который не существует (имеет значение undefined
или null
). Например:
let obj;
obj.property = "value"; // Uncaught TypeError: Cannot set property 'property' of undefined
Возможные причины
- Объект не был инициализирован.
- Вы обращаетесь к объекту, который уже удален или еще не создан.
- Ошибка в цепочке данных, например, промежуточное свойство объекта равно
undefined
.
Шаги по исправлению
1. Инициализация объекта перед использованием
Убедитесь, что объект объявлен и инициализирован перед тем, как вы присваиваете его свойствам значения. Неверный код:
let obj;
obj.property = "value"; // Ошибка
Исправление:
let obj = {};
obj.property = "value"; // Работает
2. Проверка существования объекта перед доступом
Проверяйте объект на null
или undefined
, чтобы избежать ошибок. Пример:
let obj;
if (obj) {
obj.property = "value";
} else {
console.log("Объект не определен");
}
3. Использование опциональной цепочки
Если ошибка возникает в глубоко вложенных объектах, используйте опциональную цепочку. Пример:
let obj;
obj?.nestedProperty?.subProperty = "value"; // Не вызовет ошибку
4. Проверка асинхронных данных
Если объект формируется после загрузки данных, убедитесь, что данные доступны перед их использованием.
let obj;
setTimeout(() => {
obj = { property: "value" };
console.log(obj.property); // Работает
}, 1000);
// Нельзя обращаться к obj до инициализации:
console.log(obj.property); // Ошибка
Пример из жизни
Вы загружаете данные пользователя с сервера и пытаетесь установить свойство объекта:
let user;
user.name = "Иван"; // Ошибка
Исправление:
let user = {};
user.name = "Иван"; // Работает
Итог
Чтобы избежать ошибки «Cannot set property of undefined», убедитесь, что объект существует и инициализирован. Используйте проверки на null
, опциональную цепочку или инициализируйте объект перед работой с его свойствами.
- 15 ноября 2024
Как исправить ошибку JavaScript «Uncaught SyntaxError: Unexpected token»
Эта ошибка возникает, когда интерпретатор JavaScript сталкивается с неожиданным токеном (символом) в коде, который нарушает синтаксические правила. Например:
let obj = { key: "value", }; // Uncaught SyntaxError: Unexpected token }
Возможные причины
- Лишние или пропущенные символы, такие как запятые, точки с запятой, кавычки или скобки.
- Неправильное использование синтаксиса, например, забытые конструкции или операторы.
- Смешение разных типов кавычек (например, двойных и одинарных) без соблюдения правил их вложенности.
Шаги по исправлению
1. Проверка корректности синтаксиса
Убедитесь, что все запятые, точки с запятой и кавычки находятся на своих местах. Неверный код:
let obj = { key: "value", }; // Лишняя запятая
Исправление:
let obj = { key: "value" }; // Правильный синтаксис
2. Проверка закрытия скобок
Проверьте, закрыты ли все фигурные, круглые и квадратные скобки. Неверный код:
if (true {
console.log("Ошибка!");
}
Исправление:
if (true) {
console.log("Исправлено!");
}
3. Проверка типов кавычек
Не смешивайте одинарные и двойные кавычки. Неверный код:
let str = "Привет'; // Ошибка
Исправление:
let str = "Привет"; // Или let str = 'Привет';
4. Использование отладчика
Откройте консоль браузера или отладчик в вашей IDE, чтобы найти строку с ошибкой. Она будет указана в сообщении об ошибке.
// В консоли может быть указано:
Uncaught SyntaxError: Unexpected token } at script.js:10
Исправьте строку, где произошла ошибка.
5. Проверка работы кода в строгом режиме
Добавьте "use strict";
в начало вашего файла или функции, чтобы браузер проверял ваш код на соответствие строгому синтаксису.
"use strict";
let obj = { key: "value" };
console.log(obj);
Пример из жизни
Вы пытаетесь использовать стрелочную функцию, но забыли закрыть скобки:
const add = (a, b => {
return a + b;
};
Исправление:
const add = (a, b) => {
return a + b;
};
Итог
Чтобы избежать ошибок «Unexpected token», всегда проверяйте синтаксис вашего кода на наличие лишних или пропущенных символов, используйте инструменты отладки и следите за правильным использованием конструкций JavaScript.
- 15 ноября 2024
300кк в наносекунду
Игра, где нужно забрать своё и продержаться ещё один день.
- 7 марта 2024
9 книг по JavaScript для начинающих в 2024
Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.
Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.
- 6 марта 2024
Объект URL в JavaScript: полный разбор
Объект URL
в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.
Создать объект URL
можно двумя способами:
Конструктор URL()
— самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.
const url = new URL("https://www.example.com/path?query=123#hash");
Использование window.location
— это глобальный объект в браузерах, который содержит информацию о текущем URL.
const currentUrl = new URL(window.location.href);
- 23 января 2024
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Давайте сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js
и npm
, установите их с официального сайта.
- 22 ноября 2023
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>
:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js
файла к HTML-документу:
<script src="script.js"></script>
- 1 ноября 2023