JavaScript: Регулярні вирази

Практика: парсинг та трансформація тексту

📖 Теорія

Корисні regex-патерни для реальних задач:

JavaScript
1class="hl-comment">// Email
2/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
3
4class="hl-comment">// URL
5/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b/
6
7class="hl-comment">// Телефон (гнучкий)
8/^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/
9
10class="hl-comment">// Дата YYYY-MM-DD
11/^(19|20)\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/
12
13class="hl-comment">// IP-адреса
14/^(25[0-5]|2[0-4]\d|[01]?\d\d?)(\.(25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/
15
16class="hl-comment">// Slug (для URL)
17/^[a-z0-9]+(?:-[a-z0-9]+)*$/
18
19class="hl-comment">// Markdown посилання
20/\[([^\]]+)\]\(([^)]+)\)/g
💡 Приклад коду
Вивід:

                            
📝 ЗАВДАННЯ (3)
1.
Завдання 1: camelCase конвертер
10 XP
Напиши функції:
1. toKebab(str) — перетворює camelCase на kebab-case
2. toCamel(str) — перетворює kebab-case на camelCase

Виведи:
toKebab('backgroundColor') → 'background-color'
toKebab('myVariableName') → 'my-variable-name'
toCamel('border-top-color') → 'borderTopColor'
💡 Підказка: toKebab: replace /([a-z])([A-Z])/g, toCamel: replace /-([a-z])/g
🔓 Розв'язок:
const toKebab = s => s.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
const toCamel = s => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
console.log(toKebab('backgroundColor'));
console.log(toKebab('myVariableName'));
console.log(toCamel('border-top-color'));
Вивід:

                                

2.
Завдання 2: Маскування чутливих даних
20 XP
Напиши функцію maskSensitive(text) що замінює:
1. Email-адреси на [EMAIL]
2. Числа з 4+ цифр підряд на [NUMBER]

Виведи результат для:
'Зв'яжіться з john@example.com або +380991234567'
💡 Підказка: Два окремих replace. Email: /[\w.]+@[\w.]+/g, Число 4+: /\d{4,}/g
🔓 Розв'язок:
function maskSensitive(text) {
  return text
    .replace(/[\w.+-]+@[\w.-]+\.[a-z]{2,}/gi, '[EMAIL]')
    .replace(/\d{4,}/g, '[NUMBER]');
}
console.log(maskSensitive("Зв\'яжіться з john@example.com або +380991234567"));
Вивід:

                                

3.
Завдання 3: Парсер шаблону
30 XP
Напиши функцію template(str, data) що замінює {{key}} у рядку на значення з об'єкта data.

template('Привіт, {{name}}! Тобі {{age}} років.', {name:'Оля', age:25})
→ 'Привіт, Оля! Тобі 25 років.'

Якщо ключ не знайдено — залишай {{key}} без змін.
💡 Підказка: str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] ?? match)
🔓 Розв'язок:
function template(str, data) {
  return str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] !== undefined ? data[key] : match);
}
console.log(template('Привіт, {{name}}! Тобі {{age}} років.', {name:'Оля', age:25}));
console.log(template('{{greeting}}, {{name}}!', {name:'Іван'}));
Вивід: