Function initVisualDebugger

apps/regexp/index.js:1514–1661

* 初始化可视化调试器

()

 * 初始化可视化调试器
 */
function initVisualDebugger() {
    const testBtn = document.getElementById('visualTestBtn');
    const regexInput = document.getElementById('visualRegex');
    const testTextArea = document.getElementById('visualTestText');
    const resultDiv = document.getElementById('visualResult');
    const errorMsg = document.getElementById('visualErrorMsg');
    const flagCheckboxes = document.querySelectorAll('.flag-btn input[type="checkbox"]');

    if (!testBtn) return;

    // 标志复选框事件
    flagCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateFlagsInputFromCheckbox);
    });

    function updateFlagsInputFromCheckbox() {
        const flags = Array.from(flagCheckboxes)
            .filter(cb => cb.checked)
            .map(cb => cb.value)
            .join('');
        document.getElementById('visualFlags').value = flags;
    }

    testBtn.addEventListener('click', doVisualTest);
    regexInput.addEventListener('keyup', function(e) {
        if (e.key === 'Enter') doVisualTest();
    });
    testTextArea.addEventListener('keyup', function(e) {
        if (e.key === 'Enter' && e.ctrlKey) doVisualTest();
    });

    // 新增：输入时自动实时匹配
    regexInput.addEventListener('input', doVisualTest);
    testTextArea.addEventListener('input', doVisualTest);

    function doVisualTest() {
        let regexStr = regexInput.value.trim();
        const testText = testTextArea.value.trim();

        errorMsg.textContent = '';

        if (!regexStr) {
            errorMsg.textContent = '请输入正则表达式';
            return;
        }
        if (!testText) {
            errorMsg.textContent = '请输入要测试的文本';
            return;
        }

        // 新增：支持 /pattern/flags 写法
        let pattern = regexStr;
        let flags = Array.from(flagCheckboxes)
            .filter(cb => cb.checked)
            .map(cb => cb.value)
            .join('');

        // 如果是 /pattern/flags 形式