Понимание регулярных выражений 🗣️ в JavaScript: реальные сценарии и фрагменты кода 🔡 🧑‍💻

Регулярные выражения, часто сокращенно называемые regex или regexp, являются мощными инструментами для сопоставления с образцом и работы с текстом. В JavaScript регулярные выражения представлены объектами и обеспечивают краткий и гибкий способ работы со строками. В этой статье мы изучим основы регулярных выражений, поймем их синтаксис и углубимся в сценарии из реальной жизни, где они окажутся бесценными. Кроме того, мы предоставим фрагменты кода для демонстрации их практического использования.

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

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

2. Синтаксис регулярных выражений

Регулярные выражения в JavaScript представляются с помощью конструктора RegExp или литерального синтаксиса, заключенного в косую черту (/.../). Наиболее распространенные метасимволы в регулярных выражениях включают:

  • . (точка): соответствует любому одиночному символу, кроме символов новой строки.
  • *: Соответствует предыдущему символу ноль или более раз.
  • +: соответствует предыдущему символу один или несколько раз.
  • ?: Соответствует предыдущему символу ноль или один раз.
  • |: действует как оператор ИЛИ, сопоставляя либо выражение до, либо после него.
  • []: представляет класс символов, соответствующий любому одиночному символу в квадратных скобках.
  • ^: соответствует началу строки.
  • $: соответствует концу строки.
  • () (круглые скобки): группирует выражения.

3. Реальные сценарии

Проверка адресов электронной почты

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

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

function isValidEmail(email) {
  return emailPattern.test(email);
}

console.log(isValidEmail('[email protected]')); // Output: true
console.log(isValidEmail('invalid-email'));   // Output: false

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

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

const text = 'I have 5 apples and 3 oranges.';
const numbersPattern = /\d+/g;
const numbers = text.match(numbersPattern);

console.log(numbers); // Output: ['5', '3']

Замена текстовых шаблонов

Регулярные выражения полезны для замены определенных шаблонов в строке. Например, замена всех вхождений слова:

const text = 'JavaScript is fun. JavaScript is powerful.';

const replacedText = text.replace(/JavaScript/g, 'TypeScript');
console.log(replacedText); // Output: 'TypeScript is fun. TypeScript is powerful.'

Проверка пароля

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

const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

function isValidPassword(password) {
  return passwordPattern.test(password);
}

console.log(isValidPassword('Password123')); // Output: true
console.log(isValidPassword('pass'));        // Output: false

Проверка номера телефона

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

const phonePattern = /^(\+?\d{1,3})?[-.\s]?\d{3}[-.\s]?\d{3}[-.\s]?\d{4}$/;

function isValidPhoneNumber(phoneNumber) {
  return phonePattern.test(phoneNumber);
}

console.log(isValidPhoneNumber('+1 123-456-7890')); // Output: true
console.log(isValidPhoneNumber('123.456.7890'));    // Output: true
console.log(isValidPhoneNumber('123456789'));       // Output: false (invalid format)

Извлечение URL

Регулярные выражения могут помочь извлечь URL-адреса из блока текста:

const text = 'Visit my website at https://example.com and also check https://github.com/user';

const urlPattern = /https?:\/\/\S+/g;
const urls = text.match(urlPattern);

console.log(urls); // Output: ['https://example.com', 'https://github.com/user']

Валидация данных

Вы можете использовать регулярные выражения для проверки форматов данных. Например, проверка даты в формате ГГГГ-ММ-ДД:

const datePattern = /^\d{4}-\d{2}-\d{2}$/;

function isValidDate(date) {
  return datePattern.test(date);
}

console.log(isValidDate('2023-07-26')); // Output: true
console.log(isValidDate('23-07-26'));   // Output: false (invalid format)

Выделение текстовых совпадений

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

const text = 'The quick brown fox jumps over the lazy dog.';
const searchText = 'fox';

const searchPattern = new RegExp(searchText, 'gi');
const highlightedText = text.replace(searchPattern, (match) => `<strong>${match}</strong>`);

console.log(highlightedText);
// Output: 'The quick brown <strong>fox</strong> jumps over the lazy dog.'

Токенизация

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

const text = 'Hello, how are you?';

//Tokenizing into words
const words = text.match(/\b\w+\b/g);
console.log(words); // Output: ['Hello', 'how', 'are', 'you']

//Tokenizing into characters
const characters = text.split('');
console.log(characters); // Output: ['H', 'e', 'l', 'l', 'o', ',', ' ', 'h', 'o', 'w', ' ', 'a', 'r', 'e', ' ', 'y', 'o', 'u', '?']

Удаление тега HTML

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

const htmlText = '<p>Hello <strong>world</strong>, how are you?</p>';

const htmlTagPattern = /<[^>]+>/g;
const plainText = htmlText.replace(htmlTagPattern, '');

console.log(plainText); // Output: 'Hello world, how are you?'

4. Вывод

Регулярные выражения в JavaScript предлагают мощный и универсальный способ работы со строками. В этой статье мы рассмотрели дополнительные реальные сценарии использования регулярных выражений, такие как проверка номера телефона, извлечение URL-адреса, проверка данных, выделение текстовых совпадений, токенизация и удаление HTML-тегов.

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

5. Ссылки

Находите эту статью полезной? Ставь лайк или комментарий.

Грациас 🙏.