JSON 解析器技術實作 JSON Parser Implementation

/**
 * JSON Parser - Core Implementation
 * JSON 解析器 - 核心實作
 * 
 * A powerful tool for parsing, validating, formatting and analyzing JSON data
 * 一個用於解析、驗證、格式化和分析 JSON 數據的強大工具
 */
class JsonParser {
    constructor() {
        // 設定預設語言 / Set default language
        this.currentLanguage = 'zh';
        
        // 翻譯字典 / Translation dictionary
        this.translations = {
            zh: {
                validate: '驗證',
                format: '格式化', 
                compress: '壓縮',
                analyze: '分析',
                clear: '清空',
                copy: '複製',
                validJson: 'JSON 格式正確',
                invalidJson: 'JSON 格式錯誤',
                emptyInput: '請輸入 JSON 數據',
                copied: '已複製到剪貼簿',
                error: '錯誤'
            },
            en: {
                validate: 'Validate',
                format: 'Format',
                compress: 'Compress', 
                analyze: 'Analyze',
                clear: 'Clear',
                copy: 'Copy',
                validJson: 'Valid JSON',
                invalidJson: 'Invalid JSON',
                emptyInput: 'Please enter JSON data',
                copied: 'Copied to clipboard',
                error: 'Error'
            }
        };
        
        // 解析配置 / Parser configuration
        this.parseTimeout = null;
        this.maxDepth = 100;
        this.indentSize = 2;
        
        // DOM 元素快取 / DOM element cache
        this.elements = {};
        
        // 統計資料 / Statistics
        this.stats = {
            keyCount: 0,
            valueCount: 0,
            arrayCount: 0,
            objectCount: 0,
            maxDepth: 0
        };
        
        // 啟動初始化 / Initialize
        this.init();
    }
    
    /**
     * 初始化方法 - 按順序執行所有初始化步驟
     * Initialization method - Execute all initialization steps in order
     */
    init() {
        this.setupGlobalLanguageListener(); // 必須最先執行 / Must execute first
        this.initElements();                // 初始化DOM元素 / Initialize DOM elements
        this.setupEventListeners();        // 設置事件監聽 / Set up event listeners
        this.setupKeyboardShortcuts();     // 設置快捷鍵 / Set up keyboard shortcuts
        this.updateLanguage();             // 設定初始語言 / Set initial language
    }
}

/**
 * 設置全域語言監聽器
 * Setup global language listener
 * 
 * 這是工具與 Tool Master 語言系統整合的關鍵方法
 * This is the key method for tool integration with Tool Master language system
 */
setupGlobalLanguageListener() {
    // 監聽全域語言切換事件 / Listen to global language change events
    window.addEventListener('languageChanged', (event) => {
        this.currentLanguage = event.detail.language;
        this.updateLanguage();
    });
    
    // 處理全域語言系統加載時序問題 / Handle global language system loading timing
    const checkGlobalLanguage = () => {
        if (window.globalI18n) {
            this.currentLanguage = window.globalI18n.currentLanguage;
            this.updateLanguage();
            return true;
        }
        return false;
    };
    
    // 立即檢查，如果沒有就延遲重試 / Check immediately, retry with delay if not available
    if (!checkGlobalLanguage()) {
        setTimeout(() => {
            checkGlobalLanguage();
        }, 100);
    }
}

/**
 * 更新界面語言
 * Update interface language
 * 
 * 根據當前語言更新所有可見的文字元素
 * Update all visible text elements based on current language
 */
updateLanguage() {
    // 更新按鈕文字 / Update button text
    this.updateButtonText();
    
    // 更新狀態訊息 / Update status messages
    this.updateStatusMessages();
    
    // 更新工具提示 / Update tooltips
    this.updateTooltips();
    
    // 重新渲染統計資料 / Re-render statistics
    this.renderStats();
}

/**
 * 取得翻譯文字
 * Get translated text
 */
getTranslation(key) {
    return this.translations[this.currentLanguage][key] || key;
}

/**
 * 初始化 DOM 元素
 * Initialize DOM elements
 * 
 * 快取所有需要頻繁訪問的 DOM 元素引用
 * Cache all DOM element references that need frequent access
 */
initElements() {
    this.elements = {
        // 主要輸入輸出區域 / Main input/output areas
        inputTextarea: document.getElementById('json-input'),
        outputTextarea: document.getElementById('json-output'),
        
        // 控制按鈕 / Control buttons
        validateBtn: document.getElementById('validate-btn'),
        formatBtn: document.getElementById('format-btn'),
        compressBtn: document.getElementById('compress-btn'),
        analyzeBtn: document.getElementById('analyze-btn'),
        clearBtn: document.getElementById('clear-btn'),
        copyBtn: document.getElementById('copy-btn'),
        
        // 狀態顯示區域 / Status display areas
        statusMessage: document.getElementById('status-message'),
        errorDisplay: document.getElementById('error-display'),
        statsContainer: document.getElementById('stats-container'),
        
        // 樹狀視圖 / Tree view
        treeView: document.getElementById('tree-view'),
        treeContainer: document.getElementById('tree-container')
    };
    
    // 檢查必要元素是否存在 / Check if required elements exist
    const requiredElements = ['inputTextarea', 'validateBtn', 'statusMessage'];
    requiredElements.forEach(elementKey => {
        if (!this.elements[elementKey]) {
            console.error(`Required element not found: ${elementKey}`);
        }
    });
}

/**
 * 設置事件監聽器
 * Setup event listeners
 * 
 * 綁定所有用戶交互事件，包含鍵盤快捷鍵
 * Bind all user interaction events, including keyboard shortcuts
 */
setupEventListeners() {
    // 按鈕點擊事件 / Button click events
    this.elements.validateBtn?.addEventListener('click', () => this.validateJson());
    this.elements.formatBtn?.addEventListener('click', () => this.formatJson());
    this.elements.compressBtn?.addEventListener('click', () => this.compressJson());
    this.elements.analyzeBtn?.addEventListener('click', () => this.analyzeJson());
    this.elements.clearBtn?.addEventListener('click', () => this.clearInput());
    this.elements.copyBtn?.addEventListener('click', () => this.copyToClipboard());
    
    // 輸入區域事件 / Input area events
    if (this.elements.inputTextarea) {
        // 即時驗證 (防抖) / Real-time validation (debounced)
        this.elements.inputTextarea.addEventListener('input', 
            this.debounce(() => this.autoValidate(), 500)
        );
        
        // 拖放支援 / Drag and drop support
        this.elements.inputTextarea.addEventListener('dragover', this.handleDragOver.bind(this));
        this.elements.inputTextarea.addEventListener('drop', this.handleDrop.bind(this));
    }
}

/**
 * 設置鍵盤快捷鍵
 * Setup keyboard shortcuts
 */
setupKeyboardShortcuts() {
    document.addEventListener('keydown', (event) => {
        // Ctrl+Enter: 驗證 JSON / Validate JSON
        if (event.ctrlKey && event.key === 'Enter') {
            event.preventDefault();
            this.validateJson();
        }
        
        // Ctrl+Shift+F: 格式化 / Format
        if (event.ctrlKey && event.shiftKey && event.key === 'F') {
            event.preventDefault();
            this.formatJson();
        }
        
        // Ctrl+Shift+C: 壓縮 / Compress
        if (event.ctrlKey && event.shiftKey && event.key === 'C') {
            event.preventDefault();
            this.compressJson();
        }
    });
}

/**
 * 驗證 JSON 語法
 * Validate JSON syntax
 * 
 * 完整的 JSON 驗證，包含錯誤定位和結構分析
 * Complete JSON validation with error location and structure analysis
 */
validateJson(inputText = null) {
    try {
        const jsonText = inputText || this.elements.inputTextarea.value;
        
        // 清除之前的錯誤 / Clear previous errors
        this.clearErrors();
        
        if (!jsonText.trim()) {
            this.showStatus(this.getTranslation('emptyInput'), 'warning');
            return { valid: false, error: 'Empty input' };
        }
        
        // 解析 JSON / Parse JSON
        const parsed = JSON.parse(jsonText);
        
        // 結構分析 / Structure analysis
        const analysis = this.analyzeStructure(parsed);
        
        // 顯示成功狀態 / Show success status
        this.showStatus(this.getTranslation('validJson'), 'success');
        
        // 更新統計資料 / Update statistics
        this.updateStats(analysis);
        
        // 生成樹狀視圖 / Generate tree view
        this.generateTreeView(parsed);
        
        return {
            valid: true,
            data: parsed,
            analysis: analysis
        };
        
    } catch (error) {
        // 錯誤處理 / Error handling
        const errorInfo = this.parseError(error, jsonText);
        this.showError(errorInfo);
        
        return {
            valid: false,
            error: error.message,
            location: errorInfo
        };
    }
}

/**
 * 格式化 JSON
 * Format JSON
 */
formatJson() {
    const result = this.validateJson();
    if (result.valid) {
        const formatted = JSON.stringify(result.data, null, this.indentSize);
        this.elements.outputTextarea.value = formatted;
        this.showStatus(this.getTranslation('format') + ' ' + this.getTranslation('success'), 'success');
    }
}

/**
 * 壓縮 JSON
 * Compress JSON
 */
compressJson() {
    const result = this.validateJson();
    if (result.valid) {
        const compressed = JSON.stringify(result.data);
        this.elements.outputTextarea.value = compressed;
        this.showStatus(this.getTranslation('compress') + ' ' + this.getTranslation('success'), 'success');
    }
}

/**
 * 錯誤解析
 * Parse error
 */
parseError(error, jsonText) {
    // 從錯誤信息中提取位置 / Extract position from error message
    const positionMatch = error.message.match(/position (\d+)/i);
    let position = positionMatch ? parseInt(positionMatch[1]) : 0;
    
    // 計算行列號 / Calculate line and column
    const lines = jsonText.substring(0, position).split('\n');
    const line = lines.length;
    const column = lines[lines.length - 1].length + 1;
    
    return {
        message: error.message,
        position,
        line,
        column,
        context: this.getErrorContext(jsonText, line, column)
    };
}

/**
 * 應用語法高亮
 * Apply syntax highlighting
 */
applySyntaxHighlighting(text) {
    // 語法高亮規則 / Syntax highlighting rules
    const rules = [
        {
            name: 'string',
            pattern: /"(?:[^"\\\\]|\\\\.)*"/g,
            className: 'json-string'
        },
        {
            name: 'number',
            pattern: /-?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?/g,
            className: 'json-number'
        },
        {
            name: 'boolean',
            pattern: /\\b(?:true|false)\\b/g,
            className: 'json-boolean'
        },
        {
            name: 'null',
            pattern: /\\bnull\\b/g,
            className: 'json-null'
        },
        {
            name: 'key',
            pattern: /"(?:[^"\\\\]|\\\\.)*"(?=\\s*:)/g,
            className: 'json-key'
        }
    ];
    
    // 應用規則 / Apply rules
    let highlightedText = this.escapeHtml(text);
    rules.forEach(rule => {
        highlightedText = highlightedText.replace(rule.pattern, 
            `$&`);
    });
    
    return highlightedText;
}

/**
 * 生成樹狀視圖
 * Generate tree view
 */
generateTreeView(data, container = this.elements.treeContainer, level = 0) {
    if (!container) return;
    
    container.innerHTML = '';
    
    const tree = this.createTreeNode(data, level);
    container.appendChild(tree);
}

/**
 * 創建樹狀節點
 * Create tree node
 */
createTreeNode(data, level = 0, key = null) {
    const node = document.createElement('div');
    node.className = `tree-node level-${level}`;
    
    if (Array.isArray(data)) {
        // 數組節點 / Array node
        node.innerHTML = `
            ${key ? '"' + key + '": ' : ''}[
            ${this.getTranslation('array')} (${data.length})
        `;
        
        data.forEach((item, index) => {
            const childNode = this.createTreeNode(item, level + 1, index);
            node.appendChild(childNode);
        });
        
        const closeNode = document.createElement('div');
        closeNode.className = `tree-node level-${level}`;
        closeNode.innerHTML = ']';
        node.appendChild(closeNode);
        
    } else if (typeof data === 'object' && data !== null) {
        // 物件節點 / Object node
        const keys = Object.keys(data);
        node.innerHTML = `
            ${key ? '"' + key + '": ' : ''}{
            ${this.getTranslation('object')} (${keys.length})
        `;
        
        keys.forEach(objKey => {
            const childNode = this.createTreeNode(data[objKey], level + 1, objKey);
            node.appendChild(childNode);
        });
        
        const closeNode = document.createElement('div');
        closeNode.className = `tree-node level-${level}`;
        closeNode.innerHTML = '}';
        node.appendChild(closeNode);
        
    } else {
        // 原始值節點 / Primitive value node
        const valueType = data === null ? 'null' : typeof data;
        const displayValue = JSON.stringify(data);
        
        node.innerHTML = `
            ${key ? '"' + key + '": ' : ''}
            ${displayValue}
            (${valueType})
        `;
    }
    
    return node;
}

/**
 * 防抖函數
 * Debounce function
 */
debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

/**
 * 複製到剪貼簿
 * Copy to clipboard
 */
async copyToClipboard() {
    try {
        const text = this.elements.outputTextarea.value;
        if (!text) {
            this.showStatus(this.getTranslation('emptyOutput'), 'warning');
            return;
        }
        
        await navigator.clipboard.writeText(text);
        this.showStatus(this.getTranslation('copied'), 'success');
        
    } catch (err) {
        // 降級方案 / Fallback approach
        this.elements.outputTextarea.select();
        document.execCommand('copy');
        this.showStatus(this.getTranslation('copied'), 'success');
    }
}

/**
 * 結構分析
 * Structure analysis
 */
analyzeStructure(data, depth = 0, stats = null) {
    if (!stats) {
        stats = {
            keyCount: 0,
            valueCount: 0,
            arrayCount: 0,
            objectCount: 0,
            maxDepth: 0,
            types: {}
        };
    }
    
    stats.maxDepth = Math.max(stats.maxDepth, depth);
    
    if (Array.isArray(data)) {
        stats.arrayCount++;
        stats.valueCount += data.length;
        
        data.forEach(item => {
            this.analyzeStructure(item, depth + 1, stats);
        });
        
    } else if (typeof data === 'object' && data !== null) {
        stats.objectCount++;
        const keys = Object.keys(data);
        stats.keyCount += keys.length;
        
        keys.forEach(key => {
            this.analyzeStructure(data[key], depth + 1, stats);
        });
        
    } else {
        const type = data === null ? 'null' : typeof data;
        stats.types[type] = (stats.types[type] || 0) + 1;
        stats.valueCount++;
    }
    
    return stats;
}

/**
 * 顯示狀態訊息
 * Show status message
 */
showStatus(message, type = 'info') {
    if (!this.elements.statusMessage) return;
    
    this.elements.statusMessage.textContent = message;
    this.elements.statusMessage.className = `status-message ${type}`;
    
    // 自動隱藏 / Auto hide
    setTimeout(() => {
        this.elements.statusMessage.className = 'status-message';
    }, 3000);
}

/**
 * HTML 轉義
 * HTML escape
 */
escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * 清除錯誤標記
 * Clear error markers
 */
clearErrors() {
    if (this.elements.errorDisplay) {
        this.elements.errorDisplay.innerHTML = '';
        this.elements.errorDisplay.style.display = 'none';
    }
}

/**
 * 初始化 JSON 解析器
 * Initialize JSON Parser
 * 
 * 當頁面載入完成後，自動創建工具實例
 * Automatically create tool instance when page loading is complete
 */

// 創建並啟動工具 / Create and launch tool
new JsonParser();

/*
執行流程 / Execution Flow:
1. new JsonParser() 呼叫建構函數 / Call constructor
2. 建構函數設置初始值和配置 / Constructor sets initial values and configuration
3. 呼叫 this.init() 開始初始化 / Call this.init() to start initialization
4. init() 依序執行：/ init() executes in order:
   - setupGlobalLanguageListener() // 語言系統整合 / Language system integration
   - initElements()                // DOM 元素初始化 / DOM element initialization
   - setupEventListeners()         // 事件監聽器設置 / Event listener setup
   - setupKeyboardShortcuts()      // 鍵盤快捷鍵 / Keyboard shortcuts
   - updateLanguage()              // 設定初始語言 / Set initial language
5. 工具完全就緒，等待用戶輸入 / Tool fully ready, waiting for user input

鍵盤快捷鍵 / Keyboard Shortcuts:
- Ctrl+Enter: 驗證 JSON / Validate JSON
- Ctrl+Shift+F: 格式化 / Format
- Ctrl+Shift+C: 壓縮 / Compress

主要功能 / Main Features:
- 實時語法驗證 / Real-time syntax validation
- 語法高亮顯示 / Syntax highlighting
- 錯誤位置定位 / Error location positioning
- JSON 格式化/壓縮 / JSON format/compress
- 結構分析統計 / Structure analysis statistics
- 樹狀視圖展示 / Tree view display
- 雙語界面支援 / Bilingual interface support
*/