本地HTML动态词典最优实现方案及Excel文件适配结构咨询

1. 生成动态词典的最佳方式 #

• 本地数据驱动优先：将Excel词汇表转成JSON格式（可通过Excel另存为CSV，再用Python的pandas库批量转换，或用本地工具转成JSON），JSON是前端最易解析的结构化数据，适合本地离线使用。
• 实现双向实时检索：用原生JavaScript编写匹配逻辑，支持精确/模糊查询，同时做查询方向切换功能（托托纳克语→西班牙语、西班牙语→托托纳克语），无需后端，完全本地运行。
• 优化本地加载：若词汇量较大，可将JSON拆分为小文件按需加载，或用IndexedDB做本地缓存，提升重复查询的速度。

2. 本地运行的HTML页面最优结构 #

核心框架（纯原生无依赖） #

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>托托纳克语-西班牙语双向词典</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .search-bar { margin-bottom: 20px; display: flex; gap: 10px; align-items: center; }
        .search-input { flex: 1; padding: 8px; font-size: 16px; }
        .result-box { padding: 15px; border: 1px solid #ddd; border-radius: 4px; min-height: 120px; }
        .no-result { color: #666; font-style: italic; }
    </style>
</head>
<body>
    <h1>托托纳克语-西班牙语词典</h1>
    <div class="search-bar">
        <input type="text" class="search-input" placeholder="输入词汇查询...">
        <select class="direction-select">
            <option value="totonak-es">托托纳克语 → 西班牙语</option>
            <option value="es-totonak">西班牙语 → 托托纳克语</option>
        </select>
        <button onclick="queryDict()">查询</button>
    </div>
    <div class="result-box" id="resultContainer"></div>

    <script>
        // 示例数据，实际替换为转换后的JSON内容或通过fetch加载本地JSON文件
        let totonakToEs = [
            { word: "Naka", meaning: "Casa" },
            { word: "Teka", meaning: "Agua" }
        ];
        let esToTotonak = [
            { word: "Casa", meaning: "Naka" },
            { word: "Agua", meaning: "Teka" }
        ];

        function queryDict() {
            const inputVal = document.querySelector('.search-input').value.trim().toLowerCase();
            const direction = document.querySelector('.direction-select').value;
            const resultBox = document.getElementById('resultContainer');
            
            if (!inputVal) {
                resultBox.innerHTML = '<p class="no-result">请输入要查询的词汇</p>';
                return;
            }

            const targetDict = direction === 'totonak-es' ? totonakToEs : esToTotonak;
            const matches = targetDict.filter(item => item.word.toLowerCase().includes(inputVal));

            if (matches.length === 0) {
                resultBox.innerHTML = '<p class="no-result">未找到匹配词汇</p>';
            } else {
                let resultHtml = '<ul>';
                matches.forEach(item => {
                    resultHtml += `<li><strong>${item.word}</strong>: ${item.meaning}</li>`;
                });
                resultHtml += '</ul>';
                resultBox.innerHTML = resultHtml;
            }
        }

        // 支持回车触发查询
        document.querySelector('.search-input').addEventListener('keydown', e => {
            if (e.key === 'Enter') queryDict();
        });
    </script>
</body>
</html>

关键优化细节 #

• 完全本地化：将Excel转成的JSON文件与HTML放在同一目录，若数据量大，可替换脚本里的示例数据为fetch加载本地JSON：

  window.onload = async () => {
      totonakToEs = await (await fetch('totonak-es.json')).json();
      esToTotonak = await (await fetch('es-totonak.json')).json();
  };
  

• 无外部依赖：不使用任何前端框架，纯原生代码，本地打开即可运行，无需额外安装工具。
• 交互优化：添加回车查询、空输入提示、无匹配提示，提升使用体验。

Excel转JSON的本地工具方法 #

用Python脚本批量转换（需安装pandas库）：

import pandas as pd
import json

# 转换托托纳克语-西班牙语表
df1 = pd.read_excel('totonak-es.xlsx')
with open('totonak-es.json', 'w', encoding='utf-8') as f:
    json.dump(df1.to_dict('records'), f, ensure_ascii=False, indent=2)

# 转换西班牙语-托托纳克语表
df2 = pd.read_excel('es-totonak.xlsx')
with open('es-totonak.json', 'w', encoding='utf-8') as f:
    json.dump(df2.to_dict('records'), f, ensure_ascii=False, indent=2)

内容的提问来源于stack exchange，提问作者LUIS R CADENA TORRERO