Назад Зміст

Візуалізація регулярних виразів з поясненнями

Введіть текст, оберіть шаблон і підсвітяться збіги різними кольорами. Підсвітки зберігаються до натискання "Скинути".

const colors = {
    date: 'date',
    phone: 'phone',
    url: 'url',
    digits: 'digits',
    capital: 'capital'
};
const explanations = {
    date: `<b>Всі дати (ДД.ММ.РРРР)</b><br>Регулярний вираз: <code>\\b\\d{2}\\.\\d{2}\\.\\d{4}\\b</code><br>
Приклад: 12.08.2005, 01.01.2020`,
    phone: `<b>Всі телефони (+380XXXXXXXXX)</b><br>Регулярний вираз: <code>\\+380\\d{9}\\b</code><br>
Приклад: +380501234567, +380971112233`,
    url: `<b>Всі URL</b><br>Регулярний вираз: <code>\\bhttps?:\\/\\/[^\s]+</code><br>
Приклад: https://example.com, http://site.ua`,
    digits: `<b>Всі цифри</b><br>Регулярний вираз: <code>\\b\\d+\\b</code><br>
Приклад: 42, 123, 2025`,
    capital: `<b>Слова з великої літери</b><br>Регулярний вираз: <code>\\b[A-ZА-ЯІЇЄ][a-zа-яіїє]*\\b</code><br>
Приклад: Мій, Слово, Приклад`
};

let currentHTML = '';

function highlightMatches() {
    const textArea = document.getElementById('textInput');
    let text = textArea.value;
    const patternType = document.getElementById('regexSelect').value;
    const outputDiv = document.getElementById('output');
    const errorDiv = document.getElementById('error');
    errorDiv.textContent = '';

    let regex;
    try {
        if(patternType === 'date') regex = /\b\d{2}\.\d{2}\.\d{4}\b/g;
        else if(patternType === 'phone') regex = /\+380\d{9}\b/g;
        else if(patternType === 'url') regex = /\bhttps?:\/\/[^\s]+/g;
        else if(patternType === 'digits') regex = /\b\d+\b/g;
        else if(patternType === 'capital') regex =/(^|[^А-Яа-яЁёЇїІіЄєҐґA-Za-z0-9_])([A-ZА-ЯЁЇІЄҐ][a-zа-яёіїєґA-Za-z]*)(?=[^А-Яа-яЁёЇїІіЄєҐґA-Za-z0-9_]|$)/g;
        else throw new Error('Невідомий тип шаблону');

        if(!currentHTML) currentHTML = escapeHTML(text);

        let newHTML = currentHTML.replace(regex, (match) => {
            return `<mark class="${colors[patternType]}">${match}</mark>`;
        });

        outputDiv.innerHTML = newHTML;
        currentHTML = newHTML;

    } catch(e) {
        errorDiv.textContent = 'Помилка: ' + e.message;
    }
}

function resetHighlights() {
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML = '';
    currentHTML = '';
    document.getElementById('error').textContent = '';
}

function clearText() {
    document.getElementById('textInput').value = '';
    resetHighlights();
}

function loadTextFromFile() {
    const fileInput = document.getElementById('fileInput');
    if(fileInput.files.length === 0) return;
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('textInput').value = e.target.result;
        resetHighlights();
    };
    reader.readAsText(file);
}

function escapeHTML(str) {
    return str.replace(/&/g, "&")
              .replace(/</g, "<")
              .replace(/>/g, ">")
              .replace(/"/g, """)
              .replace(/'/g, "'");
}

function showExplanation() {
    const patternType = document.getElementById('regexSelect').value;
    document.getElementById('explanation').innerHTML = explanations[patternType] || '';
}

// Ініціалізація пояснення при завантаженні сторінки
showExplanation();