[ДЕНЬ 3] Регулярні вирази — це революція

Як розробники, ми часто звикаємо вирішувати проблеми за допомогою тих самих методів, особливо коли стикаємося з обмеженням часу. Однак дослідження нових підходів часто може спростити нашу роботу і зробити її більш ефективною. Для мене Регулярні вирази (Regex) стали одним із таких відкриттів.

Завдання: Виділення пошукових термінів у таблиці

В одному з моїх фриланс-проєктів я отримав завдання створити функціональність глобального пошуку. Вимоги:

• Пошуковий рядок зверху.
• Таблиця знизу, яка відображає результати.
• Будь-який текст, що співпадає з пошуковим терміном у таблиці, має бути виділений жовтим.

Спочатку я розглядав умовне рендерингування, але реалізація швидко стала безладною. Натомість я відкрив для себе Regex у поєднанні з методом replace в JavaScript, що надало мінімальне, ефективне рішення.

const highlightText = (text, searchTerm) => {  
 if (!searchTerm) return text; // Повертає текст без змін, якщо немає пошукового терміну  
 const regex = new RegExp(`(${searchTerm})`, 'gi'); // Створює нечутливий до регістру regex  
 return text.replace(regex, `$1`);  
};  

const TableRow = ({ data, searchTerm }) => (  

 {data.map((cell, index) => (  

 ))}  

);

Що таке Regex?

Regex — це Регулярні вирази, потужний інструмент для пошуку шаблонів у тексті. Він широко використовується для таких завдань, як:

• Перевірка форм: Перевірка електронної пошти, паролів чи номерів телефонів.
• Пошук і заміна: Пошук шаблонів і їх заміна на потрібні рядки.
• Витягнення даних: Витягування підстрічок з журналів, документів або введення користувача.

Як написати Regex в JavaScript?

Є два способи визначити Regex у JavaScript:

Використовуючи конструктор RegExp

const regex = new RegExp('pattern', 'modifiers');

Використовуючи літеральний синтаксис

const regex = /pattern/modifiers;

Розуміння модифікаторів Regex

Модифікатори покращують функціональність Regex. Ось короткий огляд:

Реальний випадок використання: Перевірка електронної пошти

Один з найбільш поширених випадків використання Regex — перевірка електронних адрес. Ось базовий Regex для перевірки електронної пошти:

const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

Покрокове пояснення:

1. ^: Закріплює шаблон на початку рядка.
2. [A-Za-z0-9._%+-]+: Відповідає за локальну частину електронної пошти (до символа @).
3. @: Відповідає за символ @.
4. [A-Za-z0-9.-]+: Відповідає за доменне ім'я.
5. \.: Відповідає за крапку, яка розділяє домен та TLD.
6. [A-Za-z]{2,}: Переконується, що TLD (наприклад, .com) має принаймні 2 символи.
7. $: Закріплює шаблон в кінці рядка.

Топ реальних випадків використання Regex

• Виділення пошукових термінів: Як показано вище.
• Заміна шаблонів: Використовуючи глобальний (g), щоб замінити всі входження шаблону.

const str = "Hello world. Hello universe.";  
console.log(str.replace(/hello/gi, "Hi")); // "Hi world. Hi universe."

Перевірка на багаторядковість: Використовуйте m для обробки багаторядкового тексту, наприклад, для аналізу журналів.

Ресурси для подальшого вивчення Regex

1. Regex101: Тестуйте та відлагоджуйте Regex з детальними поясненнями.
2. Документація MDN по Regex: Комплексний посібник по JavaScript Regex.
3. Чіт-лист Regex: Зручний чіт-лист для поширених шаблонів і модифікаторів.

Остаточні думки

Regex може здатися лякаючим на перший погляд, але як тільки ви освоїте його основи, він стане незамінним інструментом для ефективного вирішення багатьох проблем. Будь то перевірка форм, маніпулювання рядками або парсинг даних, Regex завжди буде вам корисним.

Перекладено з: [DAY 3] Regex is a Game-Changer